Page MenuHomePhabricator
Files F3514435

D6258.id20966.diff
No OneTemporary
Actions

D6258.id20966.diff
View Options

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<string>('');
const [password, setPassword] = React.useState<string>('');
const [errorMessage, setErrorMessage] = React.useState<string>('');
- const [siweNonce, setSIWENonce] = React.useState<?string>(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 = <hr />;
- }
-
- let siweConnectButton;
- if (isDev && signer && !siweNonce) {
- siweConnectButton = (
- <div className={css.connectButtonContainer}>
- <LoadingIndicator
- status={getSIWENonceCallLoadingStatus}
- size="medium"
- />
- </div>
- );
- } else if (isDev && signer) {
- siweConnectButton = (
- <div className={css.connectButtonContainer}>
- <ConnectButton />
- </div>
- );
- }
-
- const onSIWEButtonClick = React.useCallback(() => {
- openConnectModal && openConnectModal();
- }, [openConnectModal]);
-
- let siweButton;
- if (isDev && openConnectModal) {
- siweButton = (
- <>
- <Button
- onClick={onSIWEButtonClick}
- variant="filled"
- buttonColor={siweButtonColor}
- >
- <div className={css.ethereum_logo_container}>
- <FaEthereum />
- </div>
- Sign in with Ethereum
- </Button>
- </>
- );
+ siwe = <SIWE />;
}
return (
@@ -281,9 +168,7 @@
>
{loginButtonContent}
</Button>
- {siweSeparator}
- {siweConnectButton}
- {siweButton}
+ {siwe}
<div className={css.modal_form_error}>{errorMessage}</div>
</div>
</form>
@@ -291,25 +176,4 @@
);
}
-function LoginFormWrapper(): React.Node {
- const theme = React.useMemo(() => {
- return _merge(darkTheme())({
- radii: {
- modal: 0,
- modalMobile: 0,
- },
- colors: {
- modalBackdrop: '#242529',
- },
- });
- }, []);
- return (
- <WagmiConfig client={wagmiClient}>
- <RainbowKitProvider chains={chains} theme={theme} modalSize="compact">
- <LoginForm />
- </RainbowKitProvider>
- </WagmiConfig>
- );
-}
-
-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<?string>(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 = (
+ <div className={css.connectButtonContainer}>
+ <LoadingIndicator
+ status={getSIWENonceCallLoadingStatus}
+ size="medium"
+ />
+ </div>
+ );
+ } else if (signer) {
+ siweConnectButton = (
+ <div className={css.connectButtonContainer}>
+ <ConnectButton />
+ </div>
+ );
+ }
+
+ const onSIWEButtonClick = React.useCallback(() => {
+ openConnectModal && openConnectModal();
+ }, [openConnectModal]);
+
+ let siweButton;
+ if (openConnectModal) {
+ siweButton = (
+ <>
+ <Button
+ onClick={onSIWEButtonClick}
+ variant="filled"
+ buttonColor={siweButtonColor}
+ >
+ <div className={css.ethereumLogoContainer}>
+ <FaEthereum />
+ </div>
+ Sign in with Ethereum
+ </Button>
+ </>
+ );
+ }
+ return (
+ <div className={css.siweContainer}>
+ <hr />
+ {siweConnectButton}
+ {siweButton}
+ </div>
+ );
+}
+
+function SIWEWrapper(): React.Node {
+ const theme = React.useMemo(() => {
+ return _merge(darkTheme())({
+ radii: {
+ modal: 0,
+ modalMobile: 0,
+ },
+ colors: {
+ modalBackdrop: '#242529',
+ },
+ });
+ }, []);
+ return (
+ <WagmiConfig client={wagmiClient}>
+ <RainbowKitProvider chains={chains} theme={theme} modalSize="compact">
+ <SIWE />
+ </RainbowKitProvider>
+ </WagmiConfig>
+ );
+}
+
+export default SIWEWrapper;

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 23, 4:59 AM (18 h, 26 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2693047
Default Alt Text
D6258.id20966.diff (11 KB)

Event Timeline