diff --git a/packages/commonwealth/client/scripts/views/modals/AuthModal/SignInModal/SignInModal.tsx b/packages/commonwealth/client/scripts/views/modals/AuthModal/SignInModal/SignInModal.tsx index 3cf46dd9faa..fbd4cf277df 100644 --- a/packages/commonwealth/client/scripts/views/modals/AuthModal/SignInModal/SignInModal.tsx +++ b/packages/commonwealth/client/scripts/views/modals/AuthModal/SignInModal/SignInModal.tsx @@ -1,8 +1,11 @@ +import { isMobileApp } from 'hooks/useReactNativeWebView'; import React from 'react'; import { ModalBase } from '../common/ModalBase'; import { AuthModalType, ModalVariantProps } from '../types'; import './SignInModal.scss'; +const mobileApp = isMobileApp(); + const SignInModal = ({ onClose, onSuccess, @@ -15,7 +18,7 @@ const SignInModal = ({ onClose={onClose} layoutType={AuthModalType.SignIn} onSuccess={onSuccess} - showAuthOptionTypesFor={['wallets', 'sso']} + showAuthOptionTypesFor={mobileApp ? ['sso'] : ['wallets', 'sso']} showWalletsFor={showWalletsFor} showAuthOptionFor={showAuthOptionFor} bodyClassName="SignInModal" diff --git a/packages/commonwealth/client/scripts/views/modals/AuthModal/common/ModalBase/ModalBase.tsx b/packages/commonwealth/client/scripts/views/modals/AuthModal/common/ModalBase/ModalBase.tsx index 1930f1d0f54..a41e6b635da 100644 --- a/packages/commonwealth/client/scripts/views/modals/AuthModal/common/ModalBase/ModalBase.tsx +++ b/packages/commonwealth/client/scripts/views/modals/AuthModal/common/ModalBase/ModalBase.tsx @@ -1,6 +1,7 @@ import { ChainBase, WalletId, WalletSsoSource } from '@hicommonwealth/shared'; import commonLogo from 'assets/img/branding/common-logo.svg'; import clsx from 'clsx'; +import { isMobileApp } from 'hooks/useReactNativeWebView'; import React, { Fragment, useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import app from 'state'; @@ -51,7 +52,9 @@ const MODAL_COPY = { }, }; -const SSO_OPTIONS: AuthSSOs[] = [ +const mobileApp = isMobileApp(); + +const SSO_OPTIONS_DEFAULT: AuthSSOs[] = [ 'google', 'discord', 'x', @@ -62,6 +65,15 @@ const SSO_OPTIONS: AuthSSOs[] = [ 'SMS', ] as const; +const SSO_OPTIONS_MOBILE: AuthSSOs[] = [ + 'google', + 'apple', + 'email', + 'SMS', +] as const; + +const SSO_OPTIONS = mobileApp ? SSO_OPTIONS_MOBILE : SSO_OPTIONS_DEFAULT; + /** * AuthModal base component with customizable options, callbacks, layouts and auth options display strategy. * @param onClose callback triggered when the modal is closed or user is authenticated. @@ -223,6 +235,8 @@ const ModalBase = ({ setActiveTabIndex((prevActiveTab) => { if (!shouldShowSSOOptions && prevActiveTab === 1) return 0; + if (isMobileApp()) return 1; + if (showAuthOptionFor) { return SSO_OPTIONS.includes(showAuthOptionFor as AuthSSOs) ? 1 : 0; } @@ -343,6 +357,7 @@ const ModalBase = ({ If email or SMS option is selected don't render SSO's list, else render wallets/SSO's list based on activeTabIndex */} + {(activeTabIndex === 0 || (activeTabIndex === 1 && !isAuthenticatingWithEmail &&