9614195557

Committed 21 Jun 2024 01:10PM UTC coverage: 15.01% (-0.001%) from 15.011%

Build # 9614195557

Build Type

push

github

Committed by

web-flow

Commit Message

Updated SSO display logic in AuthModal (#8197)

* Updated SSO display logic in AuthModal

* Updated jsdoc

* Updated comment

* Updated comment

Run Details

3722 of 26279 branches covered (14.16%)

Branch coverage included in aggregate %.

0 of 3 new or added lines in 1 file covered. (0.0%)

7 existing lines in 2 files now uncovered.

5153 of 32847 relevant lines covered (15.69%)

5.02 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/commonwealth/client/scripts/views/modals/AuthModal/common/ModalBase/ModalBase.tsx

import { ChainBase, WalletId, WalletSsoSource } from '@hicommonwealth/shared';
import { useFlag } from 'client/scripts/hooks/useFlag';
import app from 'client/scripts/state';
import useAuthModalStore from 'client/scripts/state/ui/modals/authModal';
import AuthButton from 'client/scripts/views/components/AuthButton';
import {
  AuthTypes,
  AuthWallets,
  EVMWallets,
} from 'client/scripts/views/components/AuthButton/types';
import {
  CWTab,
  CWTabsRow,
} from 'client/scripts/views/components/component_kit/new_designs/CWTabs';
import clsx from 'clsx';
import React, { Fragment, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { CWIcon } from '../../../../components/component_kit/cw_icons/cw_icon';
import { CWText } from '../../../../components/component_kit/cw_text';
import {
  CWModalBody,
  CWModalFooter,
} from '../../../../components/component_kit/new_designs/CWModal';
import { AuthModalType, ModalBaseProps, ModalBaseTabs } from '../../types';
import useAuthentication from '../../useAuthentication';
import { EVMWalletsSubModal } from './EVMWalletsSubModal';
import { EmailForm } from './EmailForm';
import { MobileWalletConfirmationSubModal } from './MobileWalletConfirmationSubModal';
import './ModalBase.scss';

const MODAL_COPY = {
  [AuthModalType.AccountTypeGuidance]: {
    title: '',
    description: `We don't recognize the address you're trying to sign in with. \nWould you like to:`,
    showFooter: false,
    showExistingAccountSignInFooter: false,
  },
  [AuthModalType.CreateAccount]: {
    title: 'Create account',
    description: `Common is built on web3 technology that utilizes wallets. \nHow would you like to sign up?`,
    showFooter: true,
    showExistingAccountSignInFooter: true,
  },
  [AuthModalType.SignIn]: {
    title: 'Sign into Common',
    description: '',
    showFooter: true,
    showExistingAccountSignInFooter: false,
  },
};

const ModalBase = ({
  onClose,
  onSuccess,
  layoutType,
  hideDescription,
  customBody,
  showAuthenticationOptionsFor,
  showWalletsFor,
  bodyClassName,
  onSignInClick,
  onChangeModalType,
}: ModalBaseProps) => {
  const userOnboardingEnabled = useFlag('userOnboardingEnabled');
  const copy = MODAL_COPY[layoutType];

  const [activeTabIndex, setActiveTabIndex] = useState<number>(
    showAuthenticationOptionsFor?.includes('sso') &&
      showAuthenticationOptionsFor.length === 1
      ? 1
      : 0,
  );
  useEffect(() => {
    setActiveTabIndex((prevActiveTab) => {
      return (showAuthenticationOptionsFor?.includes('sso') &&
        showAuthenticationOptionsFor.length === 1) ||
        prevActiveTab === 1
        ? 1
        : 0;
    });
  }, [showAuthenticationOptionsFor]);

  const [isEVMWalletsModalVisible, setIsEVMWalletsModalVisible] =
    useState(false);
  const [isAuthenticatingWithEmail, setIsAuthenticatingWithEmail] =
    useState(false);

  const handleClose = async () => {
    setIsAuthenticatingWithEmail(false);
    setIsEVMWalletsModalVisible(false);
    isWalletConnectEnabled &&
      (await onResetWalletConnect().catch(console.error));
    await onClose();
  };

  const handleSuccess = async (_, isNewlyCreated) => {
    await onSuccess?.(isNewlyCreated);
    await handleClose();
  };

  const handleUnrecognizedAddressReceived = () => {
    // if this is the `layoutType == SignIn` modal, and we get an unrecognized
    // address, then change modal type to `AccountTypeGuidance`
    if (layoutType === AuthModalType.SignIn) {
      // @ts-expect-error <StrictNullChecks/>
      onChangeModalType(AuthModalType.AccountTypeGuidance);
      return false;
    }

    return true;
  };

  const { setShouldOpenGuidanceModalAfterMagicSSORedirect } =
    useAuthModalStore();

  const {
    wallets = [],
    isMagicLoading,
    isWalletConnectEnabled,
    isMobileWalletVerificationStep,
    onResetWalletConnect,
    onEmailLogin,
    onWalletSelect,
    onSocialLogin,
    onVerifyMobileWalletSignature,
  } = useAuthentication({
    // eslint-disable-next-line @typescript-eslint/no-misused-promises
    onModalClose: handleClose,
    // eslint-disable-next-line @typescript-eslint/no-misused-promises
    onSuccess: handleSuccess,
    onUnrecognizedAddressReceived: handleUnrecognizedAddressReceived,
  });

  const filterWalletNames = (byChain: ChainBase) =>
    wallets
      .filter((wallet) => wallet.chain === byChain)
      .map((wallet) => wallet.name);
  const findWalletById = (walletId: WalletId) =>
    wallets.find((wallet) => wallet.name === walletId);

  const hasWalletConnect = findWalletById(WalletId.WalletConnect);
  const evmWallets = filterWalletNames(ChainBase.Ethereum) as EVMWallets[];
  const cosmosWallets = filterWalletNames(ChainBase.CosmosSDK);
  const solanaWallets = filterWalletNames(ChainBase.Solana);
  const substrateWallets = filterWalletNames(ChainBase.Substrate);
  const nearWallet = findWalletById(WalletId.NearWallet)?.name;

  const getWalletNames = () => {
    // Wallet Display Logic:
    // 1. When `showWalletsFor` is present, show wallets for that specific chain only.
    // 2. On communities based on 'Ethereum', 'Cosmos', 'Solana', 'Substrate', or 'Near' chains:
    //    - Display wallets specific to the respective community chain.
    //    - 'Near' is the only community where 'Near' wallet is shown
    // 3. On non-community pages, show 'Ethereum', 'Cosmos', 'Solana', and 'Substrate' based wallets
    // 4. On specific communities, show specific wallets
    //    a. On 'terra' community, only show 'terrastation' and 'terra-walletconnect' (wallet connect for terra) wallets
    //    b. On 'evmos' and 'injective' communities, only show 'cosm-metamask' (metamask for cosmos communities) and
    //       'keplr-ethereum' (keplr for ethereum communities) wallets

    const showWalletsForSpecificChains = showWalletsFor || app?.chain?.base;
    if (showWalletsForSpecificChains) {
      switch (showWalletsForSpecificChains) {
        case ChainBase.Ethereum:
          return hasWalletConnect ? ['walletconnect'] : [];
        case ChainBase.CosmosSDK:
          return cosmosWallets;
        case ChainBase.Solana:
          return solanaWallets;
        case ChainBase.Substrate:
          return substrateWallets;
        case ChainBase.NEAR:
          return nearWallet ? [nearWallet] : [];
        default:
          return [];
      }
    }

    if (!app?.chain?.base) {
      return [
        ...(hasWalletConnect ? ['walletconnect'] : []),
        ...cosmosWallets,
        ...solanaWallets,
        ...substrateWallets,
      ];
    }

    return [];
  };

  const tabsList: ModalBaseTabs[] = [
    {
      name: 'Wallet',
      options: getWalletNames() as AuthWallets[],
    },
    {
      name: 'Email or Social',
      options: ['google', 'discord', 'x', 'apple', 'github', 'email'],
    },
  ];

  const onAuthMethodSelect = async (option: AuthTypes) => {
    if (option === 'email') {
      if (layoutType === AuthModalType.SignIn && userOnboardingEnabled) {
        setShouldOpenGuidanceModalAfterMagicSSORedirect(true);
      }

      setIsAuthenticatingWithEmail(true);
      return;
    }

    // if any wallet option is selected
    if (activeTabIndex === 0) {
      // if wallet connect option is selected, open the EVM wallet list modal
      if (option === 'walletconnect' && !isEVMWalletsModalVisible) {
        setIsEVMWalletsModalVisible(true);
        return;
      }

      // @ts-expect-error <StrictNullChecks>
      await onWalletSelect(wallets.find((wallet) => wallet.name === option));
    }

    // if any SSO option is selected
    if (activeTabIndex === 1) {
      if (layoutType === AuthModalType.SignIn && userOnboardingEnabled) {
        setShouldOpenGuidanceModalAfterMagicSSORedirect(true);
      }

      // TODO: decide if twitter references are to be updated to 'x'
      await onSocialLogin(
        option === 'x' ? WalletSsoSource.Twitter : (option as WalletSsoSource),
      );
    }
  };

  return (
    <>
      <section className="ModalBase">
        <CWIcon iconName="close" onClick={onClose} className="close-btn" />

        <img src="/static/img/branding/common-logo.svg" className="logo" />

        <CWText type="h2" className="header" isCentered>
          {copy.title}
        </CWText>

        {copy.description && !hideDescription && (
          <CWText type="b1" className="description" isCentered>
            {...copy.description.split('\n').map((line, index) => (
              <Fragment key={index}>
                {line}
                <br />
              </Fragment>
            ))}
          </CWText>
        )}

        <CWModalBody className={clsx('content', bodyClassName)}>
          {customBody}

          {/* @ts-expect-error StrictNullChecks*/}
          {showAuthenticationOptionsFor?.length > 0 && (
            <>
              {/* @ts-expect-error StrictNullChecks*/}
              {showAuthenticationOptionsFor?.length > 1 && (
                <CWTabsRow className="tabs">
                  {tabsList.map((tab, index) => (
                    <CWTab
                      key={tab.name}
                      label={tab.name}
                      isDisabled={isMagicLoading}
                      isSelected={tabsList[activeTabIndex].name === tab.name}
                      onClick={() => setActiveTabIndex(index)}
                    />
                  ))}
                </CWTabsRow>
              )}

              <section className="auth-options">
                {/* On the wallets tab, if no wallet is found, show "No wallets Found" */}
                {activeTabIndex === 0 &&
                  tabsList[activeTabIndex].options.length === 0 && (
                    <AuthButton type="NO_WALLETS_FOUND" />
                  )}

                {/*
                  If email option is selected don't render SSO's list,
                  else render wallets/SSO's list based on activeTabIndex
                */}
                {(activeTabIndex === 0 ||
                  (activeTabIndex === 1 && !isAuthenticatingWithEmail)) &&
                  tabsList[activeTabIndex].options.map((option, key) => (
                    <AuthButton
                      key={key}
                      type={option}
                      disabled={isMagicLoading}
                      onClick={async () => await onAuthMethodSelect(option)}
                    />
                  ))}

                {/* If email option is selected from the SSO's list, show email form */}
                {activeTabIndex === 1 && isAuthenticatingWithEmail && (
                  <EmailForm
                    isLoading={isMagicLoading}
                    onCancel={() => setIsAuthenticatingWithEmail(false)}
                    // eslint-disable-next-line @typescript-eslint/no-misused-promises
                    onSubmit={async ({ email }) => await onEmailLogin(email)}
                  />
                )}
              </section>
            </>
          )}
        </CWModalBody>

        <CWModalFooter className="footer">
          {copy.showFooter && (
            <>
              <CWText isCentered>
                By connecting to Common you agree to our&nbsp;
                <br />
                <Link to="/terms">Terms of Service</Link>
                &nbsp;and&nbsp;
                <Link to="/privacy">Privacy Policy</Link>
              </CWText>

              {copy.showExistingAccountSignInFooter && (
                <CWText isCentered>
                  Already have an account?&nbsp;
                  <button onClick={() => onSignInClick?.()}>Sign in</button>
                </CWText>
              )}
            </>
          )}
        </CWModalFooter>
      </section>
      <EVMWalletsSubModal
        availableWallets={
          [
            ...(evmWallets.includes('walletconnect') ? ['walletconnect'] : []),
            ...evmWallets.filter((x) => x !== 'walletconnect'),
          ] as EVMWallets[]
        }
        // eslint-disable-next-line @typescript-eslint/no-misused-promises
        isOpen={isEVMWalletsModalVisible}
        // eslint-disable-next-line @typescript-eslint/no-misused-promises
        onClose={async () => {
          setIsEVMWalletsModalVisible(false);
          isWalletConnectEnabled && (await onResetWalletConnect());
        }}
        // eslint-disable-next-line @typescript-eslint/no-misused-promises
        onWalletSelect={async (option) => await onAuthMethodSelect(option)}
        disabled={isMagicLoading}
        canResetWalletConnect={isWalletConnectEnabled}
        // eslint-disable-next-line @typescript-eslint/no-misused-promises
        onResetWalletConnect={onResetWalletConnect}
      />
      {/* Signature verification modal is only displayed on mobile */}
      <MobileWalletConfirmationSubModal
        isOpen={isMobileWalletVerificationStep}
        // eslint-disable-next-line @typescript-eslint/no-misused-promises
        onClose={handleClose}
        // eslint-disable-next-line @typescript-eslint/no-misused-promises
        onSignatureConfirmation={onVerifyMobileWalletSignature}
      />
    </>
  );
};

export { ModalBase };

1	import { ChainBase, WalletId, WalletSsoSource } from '@hicommonwealth/shared';
2	import { useFlag } from 'client/scripts/hooks/useFlag';
3	import app from 'client/scripts/state';
4	import useAuthModalStore from 'client/scripts/state/ui/modals/authModal';
5	import AuthButton from 'client/scripts/views/components/AuthButton';
6	import {
7	AuthTypes,
8	AuthWallets,
9	EVMWallets,
10	} from 'client/scripts/views/components/AuthButton/types';
11	import {
12	CWTab,
13	CWTabsRow,
14	} from 'client/scripts/views/components/component_kit/new_designs/CWTabs';
15	import clsx from 'clsx';
16	import React, { Fragment, useEffect, useState } from 'react';
17	import { Link } from 'react-router-dom';
18	import { CWIcon } from '../../../../components/component_kit/cw_icons/cw_icon';
19	import { CWText } from '../../../../components/component_kit/cw_text';
20	import {
21	CWModalBody,
22	CWModalFooter,
23	} from '../../../../components/component_kit/new_designs/CWModal';
24	import { AuthModalType, ModalBaseProps, ModalBaseTabs } from '../../types';
25	import useAuthentication from '../../useAuthentication';
26	import { EVMWalletsSubModal } from './EVMWalletsSubModal';
27	import { EmailForm } from './EmailForm';
28	import { MobileWalletConfirmationSubModal } from './MobileWalletConfirmationSubModal';
29	import './ModalBase.scss';
30
31	const MODAL_COPY = {
32	[AuthModalType.AccountTypeGuidance]: {
33	title: '',
34	description: `We don't recognize the address you're trying to sign in with. \nWould you like to:`,
35	showFooter: false,
36	showExistingAccountSignInFooter: false,
37	},
38	[AuthModalType.CreateAccount]: {
39	title: 'Create account',
40	description: `Common is built on web3 technology that utilizes wallets. \nHow would you like to sign up?`,
41	showFooter: true,
42	showExistingAccountSignInFooter: true,
43	},
44	[AuthModalType.SignIn]: {
45	title: 'Sign into Common',
46	description: '',
47	showFooter: true,
48	showExistingAccountSignInFooter: false,
49	},
50	};
51
52	const ModalBase = ({
53	onClose,
54	onSuccess,
55	layoutType,
56	hideDescription,
57	customBody,
58	showAuthenticationOptionsFor,
59	showWalletsFor,
60	bodyClassName,
61	onSignInClick,
62	onChangeModalType,
63	}: ModalBaseProps) => {
64	const userOnboardingEnabled = useFlag('userOnboardingEnabled');
65	const copy = MODAL_COPY[layoutType];
66
67	const [activeTabIndex, setActiveTabIndex] = useState<number>(
68	showAuthenticationOptionsFor?.includes('sso') &&	×
69	showAuthenticationOptionsFor.length === 1
70	? 1
71	: 0,
72	);
73	useEffect(() => {
74	setActiveTabIndex((prevActiveTab) => {
75	return (showAuthenticationOptionsFor?.includes('sso') &&	×
76	showAuthenticationOptionsFor.length === 1) \|\|
77	prevActiveTab === 1
78	? 1
79	: 0;
80	});
81	}, [showAuthenticationOptionsFor]);
82
83	const [isEVMWalletsModalVisible, setIsEVMWalletsModalVisible] =
UNCOV 84	useState(false);	×
85	const [isAuthenticatingWithEmail, setIsAuthenticatingWithEmail] =	×
86	useState(false);
87
88	const handleClose = async () => {
89	setIsAuthenticatingWithEmail(false);
90	setIsEVMWalletsModalVisible(false);
91	isWalletConnectEnabled &&	×
92	(await onResetWalletConnect().catch(console.error));
UNCOV 93	await onClose();	×
94	};
95
96	const handleSuccess = async (_, isNewlyCreated) => {	×
97	await onSuccess?.(isNewlyCreated);	×
UNCOV 98	await handleClose();	×
99	};
100
101	const handleUnrecognizedAddressReceived = () => {
102	// if this is the `layoutType == SignIn` modal, and we get an unrecognized
103	// address, then change modal type to `AccountTypeGuidance`
104	if (layoutType === AuthModalType.SignIn) {	×
105	// @ts-expect-error <StrictNullChecks/>
106	onChangeModalType(AuthModalType.AccountTypeGuidance);
107	return false;
108	}
109
110	return true;
111	};	×
112
113	const { setShouldOpenGuidanceModalAfterMagicSSORedirect } =
UNCOV 114	useAuthModalStore();	×
115
116	const {
117	wallets = [],	×
118	isMagicLoading,
119	isWalletConnectEnabled,
120	isMobileWalletVerificationStep,
121	onResetWalletConnect,
122	onEmailLogin,
123	onWalletSelect,
124	onSocialLogin,	×
125	onVerifyMobileWalletSignature,
126	} = useAuthentication({
127	// eslint-disable-next-line @typescript-eslint/no-misused-promises
128	onModalClose: handleClose,
129	// eslint-disable-next-line @typescript-eslint/no-misused-promises
130	onSuccess: handleSuccess,
131	onUnrecognizedAddressReceived: handleUnrecognizedAddressReceived,
132	});
133
134	const filterWalletNames = (byChain: ChainBase) =>
135	wallets
136	.filter((wallet) => wallet.chain === byChain)
137	.map((wallet) => wallet.name);
138	const findWalletById = (walletId: WalletId) =>
139	wallets.find((wallet) => wallet.name === walletId);
140
141	const hasWalletConnect = findWalletById(WalletId.WalletConnect);	×
142	const evmWallets = filterWalletNames(ChainBase.Ethereum) as EVMWallets[];	×
143	const cosmosWallets = filterWalletNames(ChainBase.CosmosSDK);	×
144	const solanaWallets = filterWalletNames(ChainBase.Solana);	×
145	const substrateWallets = filterWalletNames(ChainBase.Substrate);	×
UNCOV 146	const nearWallet = findWalletById(WalletId.NearWallet)?.name;	×
147
148	const getWalletNames = () => {	×
149	// Wallet Display Logic:
150	// 1. When `showWalletsFor` is present, show wallets for that specific chain only.
151	// 2. On communities based on 'Ethereum', 'Cosmos', 'Solana', 'Substrate', or 'Near' chains:
152	// - Display wallets specific to the respective community chain.
153	// - 'Near' is the only community where 'Near' wallet is shown
154	// 3. On non-community pages, show 'Ethereum', 'Cosmos', 'Solana', and 'Substrate' based wallets
155	// 4. On specific communities, show specific wallets
156	// a. On 'terra' community, only show 'terrastation' and 'terra-walletconnect' (wallet connect for terra) wallets
157	// b. On 'evmos' and 'injective' communities, only show 'cosm-metamask' (metamask for cosmos communities) and
158	// 'keplr-ethereum' (keplr for ethereum communities) wallets
159
160	const showWalletsForSpecificChains = showWalletsFor \|\| app?.chain?.base;	×
161	if (showWalletsForSpecificChains) {	×
162	switch (showWalletsForSpecificChains) {	×
163	case ChainBase.Ethereum:
164	return hasWalletConnect ? ['walletconnect'] : [];	×
165	case ChainBase.CosmosSDK:
166	return cosmosWallets;
167	case ChainBase.Solana:	×
168	return solanaWallets;	×
169	case ChainBase.Substrate:	×
170	return substrateWallets;
171	case ChainBase.NEAR:	×
172	return nearWallet ? [nearWallet] : [];	×
173	default:
174	return [];
175	}
176	}
177
178	if (!app?.chain?.base) {	×
UNCOV 179	return [	×
180	...(hasWalletConnect ? ['walletconnect'] : []),	×
181	...cosmosWallets,
182	...solanaWallets,
183	...substrateWallets,
184	];
185	}	×
186
187	return [];	×
188	};
189
190	const tabsList: ModalBaseTabs[] = [
191	{
192	name: 'Wallet',
193	options: getWalletNames() as AuthWallets[],
194	},
195	{
196	name: 'Email or Social',
197	options: ['google', 'discord', 'x', 'apple', 'github', 'email'],
198	},
199	];
200
201	const onAuthMethodSelect = async (option: AuthTypes) => {
202	if (option === 'email') {	×
203	if (layoutType === AuthModalType.SignIn && userOnboardingEnabled) {	×
NEW 204	setShouldOpenGuidanceModalAfterMagicSSORedirect(true);	×
205	}	×
206		×
207	setIsAuthenticatingWithEmail(true);
208	return;
209	}
210
211	// if any wallet option is selected
212	if (activeTabIndex === 0) {	×
213	// if wallet connect option is selected, open the EVM wallet list modal
214	if (option === 'walletconnect' && !isEVMWalletsModalVisible) {	×
NEW 215	setIsEVMWalletsModalVisible(true);	×
216	return;
217	}
218
219	// @ts-expect-error <StrictNullChecks>
220	await onWalletSelect(wallets.find((wallet) => wallet.name === option));
221	}
222
223	// if any SSO option is selected
224	if (activeTabIndex === 1) {	×
225	if (layoutType === AuthModalType.SignIn && userOnboardingEnabled) {	×
226	setShouldOpenGuidanceModalAfterMagicSSORedirect(true);
227	}
228
229	// TODO: decide if twitter references are to be updated to 'x'
NEW 230	await onSocialLogin(	×
231	option === 'x' ? WalletSsoSource.Twitter : (option as WalletSsoSource),	×
232	);
233	}	×
234	};	×
235
236	return (
237	<>
238	<section className="ModalBase">
239	<CWIcon iconName="close" onClick={onClose} className="close-btn" />
240
241	<img src="/static/img/branding/common-logo.svg" className="logo" />
242
243	<CWText type="h2" className="header" isCentered>
244	{copy.title}
245	</CWText>
246		×
247	{copy.description && !hideDescription && (	×
248	<CWText type="b1" className="description" isCentered>
249	{...copy.description.split('\n').map((line, index) => (
250	<Fragment key={index}>
251	{line}
252	<br />
253	</Fragment>
254	))}
255	</CWText>
256	)}	×
257
258	<CWModalBody className={clsx('content', bodyClassName)}>	×
259	{customBody}
260
261	{/* @ts-expect-error StrictNullChecks*/}
262	{showAuthenticationOptionsFor?.length > 0 && (	×
263	<>
264	{/* @ts-expect-error StrictNullChecks*/}
265	{showAuthenticationOptionsFor?.length > 1 && (	×
266	<CWTabsRow className="tabs">
267	{tabsList.map((tab, index) => (
268	<CWTab	×
269	key={tab.name}	×
270	label={tab.name}
271	isDisabled={isMagicLoading}
272	isSelected={tabsList[activeTabIndex].name === tab.name}
273	onClick={() => setActiveTabIndex(index)}
274	/>
275	))}	×
276	</CWTabsRow>
277	)}
278
279	<section className="auth-options">
280	{/* On the wallets tab, if no wallet is found, show "No wallets Found" */}
281	{activeTabIndex === 0 &&	×
282	tabsList[activeTabIndex].options.length === 0 && (
283	<AuthButton type="NO_WALLETS_FOUND" />	×
284	)}
285
286	{/*
287	If email option is selected don't render SSO's list,
288	else render wallets/SSO's list based on activeTabIndex
289	*/}
290	{(activeTabIndex === 0 \|\|
291	(activeTabIndex === 1 && !isAuthenticatingWithEmail)) &&	×
292	tabsList[activeTabIndex].options.map((option, key) => (
293	<AuthButton
294	key={key}
295	type={option}
296	disabled={isMagicLoading}
297	onClick={async () => await onAuthMethodSelect(option)}
298	/>
299	))}
300
301	{/* If email option is selected from the SSO's list, show email form */}
302	{activeTabIndex === 1 && isAuthenticatingWithEmail && (	×
303	<EmailForm
304	isLoading={isMagicLoading}
305	onCancel={() => setIsAuthenticatingWithEmail(false)}
306	// eslint-disable-next-line @typescript-eslint/no-misused-promises	×
307	onSubmit={async ({ email }) => await onEmailLogin(email)}
308	/>	×
309	)}
310	</section>
311	</>
312	)}
313	</CWModalBody>
314
315	<CWModalFooter className="footer">
316	{copy.showFooter && (	×
317	<>
318	<CWText isCentered>
319	By connecting to Common you agree to our
320	<br />
321	<Link to="/terms">Terms of Service</Link>
322	and
323	<Link to="/privacy">Privacy Policy</Link>
324	</CWText>
325
326	{copy.showExistingAccountSignInFooter && (	×
327	<CWText isCentered>
328	Already have an account?	×
329	<button onClick={() => onSignInClick?.()}>Sign in</button>
330	</CWText>
331	)}
332	</>
333	)}
334	</CWModalFooter>
335	</section>
336	<EVMWalletsSubModal
337	availableWallets={
338	[
339	...(evmWallets.includes('walletconnect') ? ['walletconnect'] : []),	×
340	...evmWallets.filter((x) => x !== 'walletconnect'),
341	] as EVMWallets[]
342	}
343	// eslint-disable-next-line @typescript-eslint/no-misused-promises
344	isOpen={isEVMWalletsModalVisible}
345	// eslint-disable-next-line @typescript-eslint/no-misused-promises
346	onClose={async () => {
347	setIsEVMWalletsModalVisible(false);	×
348	isWalletConnectEnabled && (await onResetWalletConnect());	×
349	}}
350	// eslint-disable-next-line @typescript-eslint/no-misused-promises
351	onWalletSelect={async (option) => await onAuthMethodSelect(option)}
352	disabled={isMagicLoading}
353	canResetWalletConnect={isWalletConnectEnabled}
354	// eslint-disable-next-line @typescript-eslint/no-misused-promises
355	onResetWalletConnect={onResetWalletConnect}
356	/>
357	{/* Signature verification modal is only displayed on mobile */}
358	<MobileWalletConfirmationSubModal
359	isOpen={isMobileWalletVerificationStep}
360	// eslint-disable-next-line @typescript-eslint/no-misused-promises
361	onClose={handleClose}	×
362	// eslint-disable-next-line @typescript-eslint/no-misused-promises
363	onSignatureConfirmation={onVerifyMobileWalletSignature}
364	/>
365	</>
366	);
367	};
368
369	export { ModalBase };

hicommonwealth / commonwealth / 9614195557

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous