diff --git a/web/account/log-in-form.css b/web/account/log-in-form.css --- a/web/account/log-in-form.css +++ b/web/account/log-in-form.css @@ -40,35 +40,3 @@ padding-left: 6px; align-self: center; } - -div.ethereum_logo_container { - display: flex; - justify-content: center; - align-content: center; - margin: 0 4px; -} - -hr { - margin: 20px 0; - height: 0; - overflow: visible; - text-align: center; - border: none; - border-top: #ffffff33 solid 1px; -} - -hr:after { - position: relative; - top: -12px; - padding: 0 8px; - color: white; - content: 'or'; - background-color: #1f1f1fff; -} - -div.connectButtonContainer { - width: 100%; - display: flex; - justify-content: center; - align-content: center; -} diff --git a/web/account/log-in-form.react.js b/web/account/log-in-form.react.js --- a/web/account/log-in-form.react.js +++ b/web/account/log-in-form.react.js @@ -1,32 +1,8 @@ // @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, - WagmiConfig, - useSigner, -} from 'wagmi'; -import { alchemyProvider } from 'wagmi/providers/alchemy'; -import { publicProvider } from 'wagmi/providers/public'; -import { - getSIWENonce, - getSIWENonceActionTypes, -} from 'lib/actions/siwe-actions.js'; import { logInActionTypes, logIn } from 'lib/actions/user-actions'; import { useModalContext } from 'lib/components/modal-provider.react'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors'; @@ -43,7 +19,7 @@ useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils'; -import { isDev } from 'lib/utils/dev-utils.js'; +import { isDev } from 'lib/utils/dev-utils'; import Button from '../components/button.react'; import LoadingIndicator from '../loading-indicator.react'; @@ -52,50 +28,20 @@ import { webLogInExtraInfoSelector } from '../selectors/account-selectors'; import css from './log-in-form.css'; import PasswordInput from './password-input.react'; +import SIWE from './siwe.react.js'; -// 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, -); const loadingStatusSelector = createLoadingStatusSelector(logInActionTypes); function LoginForm(): React.Node { - const { openConnectModal } = useConnectModal(); - const { data: signer } = useSigner(); const inputDisabled = useSelector(loadingStatusSelector) === 'loading'; const loginExtraInfo = useSelector(webLogInExtraInfoSelector); const callLogIn = useServerCall(logIn); - const getSIWENonceCall = useServerCall(getSIWENonce); - const getSIWENonceCallLoadingStatus = useSelector( - getSIWENonceLoadingStatusSelector, - ); - const dispatchActionPromise = useDispatchActionPromise(); const modalContext = useModalContext(); const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const [errorMessage, setErrorMessage] = React.useState(''); - const [siweNonce, setSIWENonce] = React.useState(null); const usernameInputRef = React.useRef(); @@ -103,20 +49,6 @@ usernameInputRef.current?.focus(); }, []); - React.useEffect(() => { - if (!signer || !isDev) { - setSIWENonce(null); - return; - } - dispatchActionPromise( - getSIWENonceActionTypes, - (async () => { - const response = await getSIWENonceCall(); - setSIWENonce(response); - })(), - ); - }, [dispatchActionPromise, getSIWENonceCall, signer]); - const onUsernameChange = React.useCallback(e => { invariant(e.target instanceof HTMLInputElement, 'target not input'); setUsername(e.target.value); @@ -195,54 +127,9 @@ return 'Log in'; }, [inputDisabled]); - const siweButtonColor = React.useMemo( - () => ({ backgroundColor: 'white', color: 'black' }), - [], - ); - - let siweSeparator; + let siwe; if (isDev) { - siweSeparator =
; - } - - let siweConnectButton; - if (isDev && signer && !siweNonce) { - siweConnectButton = ( -
- -
- ); - } else if (isDev && signer) { - siweConnectButton = ( -
- -
- ); - } - - const onSIWEButtonClick = React.useCallback(() => { - openConnectModal && openConnectModal(); - }, [openConnectModal]); - - let siweButton; - if (isDev && openConnectModal) { - siweButton = ( - <> - - - ); + siwe = ; } return ( @@ -281,9 +168,7 @@ > {loginButtonContent} - {siweSeparator} - {siweConnectButton} - {siweButton} + {siwe}
{errorMessage}
@@ -291,25 +176,4 @@ ); } -function LoginFormWrapper(): React.Node { - const theme = React.useMemo(() => { - return _merge(darkTheme())({ - radii: { - modal: 0, - modalMobile: 0, - }, - colors: { - modalBackdrop: '#242529', - }, - }); - }, []); - return ( - - - - - - ); -} - -export default LoginFormWrapper; +export default LoginForm; diff --git a/web/account/siwe.css b/web/account/siwe.css new file mode 100644 --- /dev/null +++ b/web/account/siwe.css @@ -0,0 +1,36 @@ +div.ethereumLogoContainer { + display: flex; + justify-content: center; + align-content: center; + margin: 0 4px; +} + +hr { + margin: 20px 0; + height: 0; + overflow: visible; + text-align: center; + border: none; + border-top: #ffffff33 solid 1px; +} + +hr:after { + position: relative; + top: -12px; + padding: 0 8px; + color: white; + content: 'or'; + background-color: #1f1f1fff; +} + +div.connectButtonContainer { + width: 100%; + display: flex; + justify-content: center; + align-content: center; +} + +div.siweContainer { + display: flex; + flex-direction: column; +} diff --git a/web/account/siwe.react.js b/web/account/siwe.react.js new file mode 100644 --- /dev/null +++ b/web/account/siwe.react.js @@ -0,0 +1,162 @@ +// @flow + +import '@rainbow-me/rainbowkit/dist/index.css'; + +import { + ConnectButton, + darkTheme, + getDefaultWallets, + RainbowKitProvider, + useConnectModal, +} from '@rainbow-me/rainbowkit'; +import _merge from 'lodash/fp/merge'; +import * as React from 'react'; +import { FaEthereum } from 'react-icons/fa'; +import { + chain, + configureChains, + createClient, + useSigner, + WagmiConfig, +} from 'wagmi'; +import { alchemyProvider } from 'wagmi/providers/alchemy'; +import { publicProvider } from 'wagmi/providers/public'; + +import { + getSIWENonce, + getSIWENonceActionTypes, +} from 'lib/actions/siwe-actions'; +import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors'; +import { + useDispatchActionPromise, + useServerCall, +} from 'lib/utils/action-utils'; + +import Button from '../components/button.react'; +import LoadingIndicator from '../loading-indicator.react'; +import { useSelector } from '../redux/redux-utils'; +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 { data: signer } = useSigner(); + const dispatchActionPromise = useDispatchActionPromise(); + const getSIWENonceCall = useServerCall(getSIWENonce); + const getSIWENonceCallLoadingStatus = useSelector( + getSIWENonceLoadingStatusSelector, + ); + + 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' }), + [], + ); + + let siweConnectButton; + if (signer && !siweNonce) { + siweConnectButton = ( +
+ +
+ ); + } else if (signer) { + siweConnectButton = ( +
+ +
+ ); + } + + const onSIWEButtonClick = React.useCallback(() => { + openConnectModal && openConnectModal(); + }, [openConnectModal]); + + let siweButton; + if (openConnectModal) { + siweButton = ( + <> + + + ); + } + return ( +
+
+ {siweConnectButton} + {siweButton} +
+ ); +} + +function SIWEWrapper(): React.Node { + const theme = React.useMemo(() => { + return _merge(darkTheme())({ + radii: { + modal: 0, + modalMobile: 0, + }, + colors: { + modalBackdrop: '#242529', + }, + }); + }, []); + return ( + + + + + + ); +} + +export default SIWEWrapper;