Page MenuHomePhorge
Files F32088795

log-in-form.react.js
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

log-in-form.react.js
View Options

// @flow
import { useConnectModal } from '@rainbow-me/rainbowkit';
import * as React from 'react';
import { useWalletClient } from 'wagmi';
import { isDev } from 'lib/utils/dev-utils.js';
import { useDispatch } from 'lib/utils/redux-utils.js';
import { useGetOrCreateCryptoStore } from './account-hooks.js';
import css from './log-in-form.css';
import SIWEButton from './siwe-button.react.js';
import SIWELoginForm from './siwe-login-form.react.js';
import TraditionalLoginForm from './traditional-login-form.react.js';
import Button from '../components/button.react.js';
import OrBreak from '../components/or-break.react.js';
import { updateNavInfoActionType } from '../redux/action-types.js';
function LoginForm(): React.Node {
const { openConnectModal } = useConnectModal();
const { data: signer } = useWalletClient();
const dispatch = useDispatch();
const getOrCreateCryptoStore = useGetOrCreateCryptoStore();
React.useEffect(() => {
void getOrCreateCryptoStore();
}, [getOrCreateCryptoStore]);
const onQRCodeLoginButtonClick = React.useCallback(() => {
dispatch({
type: updateNavInfoActionType,
payload: {
loginMethod: 'qr-code',
},
});
}, [dispatch]);
const qrCodeLoginButton = React.useMemo(() => {
if (!isDev) {
return null;
}
return (
<div className={css.form_qrcode_login}>
<Button
variant="outline"
type="submit"
onClick={onQRCodeLoginButtonClick}
>
Sign in via QR Code
</Button>
</div>
);
}, [onQRCodeLoginButtonClick]);
const [siweAuthFlowSelected, setSIWEAuthFlowSelected] =
React.useState<boolean>(false);
const onSIWEButtonClick = React.useCallback(() => {
setSIWEAuthFlowSelected(true);
openConnectModal && openConnectModal();
}, [openConnectModal]);
const cancelSIWEAuthFlow = React.useCallback(() => {
setSIWEAuthFlowSelected(false);
}, []);
if (siweAuthFlowSelected && signer) {
return (
<div className={css.modal_body}>
<SIWELoginForm cancelSIWEAuthFlow={cancelSIWEAuthFlow} />
</div>
);
}
return (
<div className={css.modal_body}>
<TraditionalLoginForm />
<OrBreak />
<SIWEButton onSIWEButtonClick={onSIWEButtonClick} />
{qrCodeLoginButton}
</div>
);
}
export default LoginForm;

File Metadata

Mime Type
text/x-java
Expires
Sun, Dec 7, 7:53 AM (1 d, 1 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5617464
Default Alt Text
log-in-form.react.js (2 KB)

Event Timeline