diff --git a/web/account/siwe.react.js b/web/account/siwe.react.js index 6e1394f7c..800e53a3a 100644 --- a/web/account/siwe.react.js +++ b/web/account/siwe.react.js @@ -1,217 +1,170 @@ // @flow import '@rainbow-me/rainbowkit/dist/index.css'; import { ConnectButton, darkTheme, getDefaultWallets, 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'; import { chain, configureChains, createClient, - useAccount, useSigner, WagmiConfig, } from 'wagmi'; import { alchemyProvider } from 'wagmi/providers/alchemy'; import { publicProvider } from 'wagmi/providers/public'; 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, - siweMessageSigningExplanationStatements, - siweStatementWithoutPublicKey, -} from 'lib/utils/siwe-utils.js'; +import { siweMessageSigningExplanationStatements } 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 const availableProviders = process.env.COMM_ALCHEMY_KEY ? [alchemyProvider({ apiKey: process.env.COMM_ALCHEMY_KEY })] : [publicProvider()]; const { chains, provider } = configureChains( [chain.mainnet], availableProviders, ); const { connectors } = getDefaultWallets({ appName: 'comm', chains, }); const wagmiClient = createClient({ autoConnect: true, connectors, provider, }); const getSIWENonceLoadingStatusSelector = createLoadingStatusSelector( getSIWENonceActionTypes, ); 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); React.useEffect(() => { if (!signer) { setSIWENonce(null); return; } dispatchActionPromise( getSIWENonceActionTypes, (async () => { const response = await getSIWENonceCall(); setSIWENonce(response); })(), ); }, [dispatchActionPromise, getSIWENonceCall, signer]); const siweButtonColor = React.useMemo( () => ({ backgroundColor: 'white', color: 'black' }), [], ); - const callSIWEAuthEndpoint = React.useCallback( - async (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 = (
); } else if (signer) { siweLoginForm = (

{siweMessageSigningExplanationStatements[0]}

{siweMessageSigningExplanationStatements[1]}

-
); } const onSIWEButtonClick = React.useCallback(() => { 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;