diff --git a/web/account/siwe.react.js b/web/account/siwe.react.js index 04c28813b..83d1bff84 100644 --- a/web/account/siwe.react.js +++ b/web/account/siwe.react.js @@ -1,218 +1,192 @@ // @flow import '@rainbow-me/rainbowkit/dist/index.css'; import olm from '@matrix-org/olm'; -import { - ConnectButton, - darkTheme, - RainbowKitProvider, - useConnectModal, -} from '@rainbow-me/rainbowkit'; +import { ConnectButton, 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'; import { useDispatch } from 'react-redux'; import { useAccount, useSigner } from 'wagmi'; 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 { createSIWEMessage, getSIWEStatementForPublicKey, siweMessageSigningExplanationStatements, } from 'lib/utils/siwe-utils.js'; import Button from '../components/button.react'; import LoadingIndicator from '../loading-indicator.react'; import { setPrimaryIdentityPublicKey } from '../redux/primary-identity-public-key-reducer'; import { useSelector } from '../redux/redux-utils'; import { webLogInExtraInfoSelector } from '../selectors/account-selectors.js'; -import { wagmiChains } from '../utils/wagmi-utils'; import css from './siwe.css'; const getSIWENonceLoadingStatusSelector = createLoadingStatusSelector( getSIWENonceActionTypes, ); function SIWE(): React.Node { const { openConnectModal } = useConnectModal(); const { address } = useAccount(); const { data: signer } = useSigner(); const dispatch = useDispatch(); 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 [ hasSIWEButtonBeenClicked, setHasSIWEButtonBeenClicked, ] = React.useState(false); const siweNonceShouldBeFetched = !siweNonce && getSIWENonceCallLoadingStatus !== 'loading' && (signer || hasSIWEButtonBeenClicked); React.useEffect(() => { if (!siweNonceShouldBeFetched) { return; } dispatchActionPromise( getSIWENonceActionTypes, (async () => { const response = await getSIWENonceCall(); setSIWENonce(response); })(), ); }, [dispatchActionPromise, getSIWENonceCall, siweNonceShouldBeFetched]); const primaryIdentityPublicKey = useSelector( state => state.primaryIdentityPublicKey, ); React.useEffect(() => { (async () => { await olm.init(); const account = new olm.Account(); account.create(); const { ed25519 } = JSON.parse(account.identity_keys()); dispatch({ type: setPrimaryIdentityPublicKey, payload: ed25519, }); })(); }, [dispatch]); const siweButtonColor = React.useMemo( () => ({ backgroundColor: 'white', color: 'black' }), [], ); 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'); invariant( primaryIdentityPublicKey, 'primaryIdentityPublicKey must be present during SIWE attempt', ); const statement = getSIWEStatementForPublicKey(primaryIdentityPublicKey); const message = createSIWEMessage(address, statement, siweNonce); const signature = await signer.signMessage(message); attemptSIWEAuth(message, signature); }, [address, attemptSIWEAuth, primaryIdentityPublicKey, signer, siweNonce]); let siweLoginForm; if (signer && (!siweNonce || !primaryIdentityPublicKey)) { siweLoginForm = (
); } else if (signer) { siweLoginForm = (

{siweMessageSigningExplanationStatements[0]}

{siweMessageSigningExplanationStatements[1]}

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

); } const onSIWEButtonClick = React.useCallback(() => { setHasSIWEButtonBeenClicked(true); openConnectModal && openConnectModal(); }, [openConnectModal]); let siweButton; if (openConnectModal) { siweButton = ( <> ); } return (

{siweLoginForm} {siweButton}
); } -function SIWEWrapper(): React.Node { - const theme = React.useMemo(() => { - return _merge(darkTheme())({ - radii: { - modal: 0, - modalMobile: 0, - }, - colors: { - modalBackdrop: '#242529', - }, - }); - }, []); - return ( - - - - ); -} - -export default SIWEWrapper; +export default SIWE; diff --git a/web/splash/splash.react.js b/web/splash/splash.react.js index 73c049f0f..5af676aab 100644 --- a/web/splash/splash.react.js +++ b/web/splash/splash.react.js @@ -1,18 +1,39 @@ // @flow +import { darkTheme, RainbowKitProvider } from '@rainbow-me/rainbowkit'; +import _merge from 'lodash/fp/merge'; import * as React from 'react'; import LoginForm from '../account/log-in-form.react'; +import { wagmiChains } from '../utils/wagmi-utils.js'; import css from './splash.css'; function Splash(): React.Node { + const rainbowKitTheme = React.useMemo(() => { + return _merge(darkTheme())({ + radii: { + modal: 0, + modalMobile: 0, + }, + colors: { + modalBackdrop: '#242529', + }, + }); + }, []); + return (
- + + +
); } export default Splash;