diff --git a/web/account/siwe.css b/web/account/siwe.css index 47b549e1a..e1def9f9a 100644 --- a/web/account/siwe.css +++ b/web/account/siwe.css @@ -1,44 +1,50 @@ 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.siweLoginFormContainer p { color: white; font-family: sans-serif; text-align: center; - padding-top: 14px; + padding-bottom: 20px; font-size: 14px; } +div.siweLoginFormContainer { + display: flex; + flex-direction: column; +} + div.connectButtonContainer { width: 100%; display: flex; justify-content: center; align-content: center; + padding-bottom: 20px; } div.siweContainer { display: flex; flex-direction: column; } diff --git a/web/account/siwe.react.js b/web/account/siwe.react.js index d590498a3..800e53a3a 100644 --- a/web/account/siwe.react.js +++ b/web/account/siwe.react.js @@ -1,167 +1,170 @@ // @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 { 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 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 siweLoginForm; if (signer && !siweNonce) { siweLoginForm = (
{siweMessageSigningExplanationStatements[0]}
{siweMessageSigningExplanationStatements[1]}
+