diff --git a/src/components/common/ConnectWallet/WalletDetails.tsx b/src/components/common/ConnectWallet/WalletDetails.tsx index 5f0442f50a..dc39e9c05c 100644 --- a/src/components/common/ConnectWallet/WalletDetails.tsx +++ b/src/components/common/ConnectWallet/WalletDetails.tsx @@ -1,3 +1,5 @@ +import { useHasFeature } from '@/hooks/useChains' +import { FEATURES } from '@/utils/chains' import { Box, Divider, SvgIcon, Typography } from '@mui/material' import type { ReactElement } from 'react' @@ -6,6 +8,8 @@ import SocialSigner from '@/components/common/SocialSigner' import WalletLogin from '@/components/welcome/WelcomeLogin/WalletLogin' const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement => { + const isSocialLoginEnabled = useHasFeature(FEATURES.SOCIAL_LOGIN) + return ( <> @@ -16,13 +20,17 @@ const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement = - - - or - - + {isSocialLoginEnabled && ( + <> + + + or + + - + + + )} ) } diff --git a/src/components/welcome/WelcomeLogin/index.tsx b/src/components/welcome/WelcomeLogin/index.tsx index a80237343a..ad768bf84a 100644 --- a/src/components/welcome/WelcomeLogin/index.tsx +++ b/src/components/welcome/WelcomeLogin/index.tsx @@ -1,5 +1,7 @@ import SocialSigner from '@/components/common/SocialSigner' import { AppRoutes } from '@/config/routes' +import { useHasFeature } from '@/hooks/useChains' +import { FEATURES } from '@/utils/chains' import { Paper, SvgIcon, Typography, Divider, Link, Box } from '@mui/material' import SafeLogo from '@/public/images/logo-text.svg' import css from './styles.module.css' @@ -11,6 +13,7 @@ import { trackEvent } from '@/services/analytics' const WelcomeLogin = () => { const router = useRouter() + const isSocialLoginEnabled = useHasFeature(FEATURES.SOCIAL_LOGIN) const continueToCreation = () => { trackEvent(CREATE_SAFE_EVENTS.OPEN_SAFE_CREATION) @@ -29,13 +32,17 @@ const WelcomeLogin = () => { - - - or - - + {isSocialLoginEnabled && ( + <> + + + or + + - + + + )} Already have a Safe Account? diff --git a/src/hooks/wallets/wallets.ts b/src/hooks/wallets/wallets.ts index c55c23f9c2..2de9efdd29 100644 --- a/src/hooks/wallets/wallets.ts +++ b/src/hooks/wallets/wallets.ts @@ -43,7 +43,7 @@ const WALLET_MODULES: { [key in WALLET_KEYS]: (chain: ChainInfo) => WalletInit } [WALLET_KEYS.WALLETCONNECT_V2]: (chain) => walletConnectV2(chain), [WALLET_KEYS.COINBASE]: () => coinbaseModule({ darkMode: prefersDarkMode() }), [WALLET_KEYS.PAIRING]: () => pairingModule(), - [WALLET_KEYS.SOCIAL]: () => MpcModule(), + [WALLET_KEYS.SOCIAL]: (chain) => MpcModule(chain), [WALLET_KEYS.LEDGER]: () => ledgerModule(), [WALLET_KEYS.TREZOR]: () => trezorModule({ appUrl: TREZOR_APP_URL, email: TREZOR_EMAIL }), [WALLET_KEYS.KEYSTONE]: () => keystoneModule(), diff --git a/src/services/mpc/SocialLoginModule.ts b/src/services/mpc/SocialLoginModule.ts index aeafa92bde..3c17663fca 100644 --- a/src/services/mpc/SocialLoginModule.ts +++ b/src/services/mpc/SocialLoginModule.ts @@ -2,6 +2,8 @@ import { _getMPCCoreKitInstance } from '@/hooks/wallets/mpc/useMPC' import { getSocialWalletService } from '@/hooks/wallets/mpc/useSocialWallet' import { getWeb3ReadOnly } from '@/hooks/wallets/web3' import * as PasswordRecoveryModal from '@/services/mpc/PasswordRecoveryModal' +import { FEATURES, hasFeature } from '@/utils/chains' +import { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk' import { type WalletInit, ProviderRpcError } from '@web3-onboard/common' import { type EIP1193Provider } from '@web3-onboard/core' import { COREKIT_STATUS } from '@web3auth/mpc-core-kit' @@ -40,7 +42,9 @@ const getConnectedAccounts = async () => { * * @returns Custom Onboard MpcModule */ -function MpcModule(): WalletInit { +function MpcModule(chain: ChainInfo): WalletInit { + if (!hasFeature(chain, FEATURES.SOCIAL_LOGIN)) return () => null + return () => { return { label: ONBOARD_MPC_MODULE_LABEL, diff --git a/src/services/mpc/__tests__/module.test.ts b/src/services/mpc/__tests__/module.test.ts index 350bdf65bb..f00b44691d 100644 --- a/src/services/mpc/__tests__/module.test.ts +++ b/src/services/mpc/__tests__/module.test.ts @@ -1,3 +1,5 @@ +import { chainBuilder } from '@/tests/builders/chains' +import * as feature from '@/utils/chains' import MpcModule, { ONBOARD_MPC_MODULE_LABEL } from '../SocialLoginModule' import { type WalletModule } from '@web3-onboard/common' @@ -5,9 +7,14 @@ import * as web3 from '@/hooks/wallets/web3' import * as useMPC from '@/hooks/wallets/mpc/useMPC' import { hexZeroPad } from 'ethers/lib/utils' +const mockChain = chainBuilder().build() + describe('MPC Onboard module', () => { + beforeAll(() => { + jest.spyOn(feature, 'hasFeature').mockReturnValue(true) + }) it('should return correct metadata', async () => { - const mpcModule = MpcModule()({ + const mpcModule = MpcModule(mockChain)({ device: { browser: { name: 'Firefox', @@ -42,7 +49,7 @@ describe('MPC Onboard module', () => { } as any }) - const mpcModule = MpcModule()({ + const mpcModule = MpcModule(mockChain)({ device: { browser: { name: 'Firefox', @@ -93,7 +100,7 @@ describe('MPC Onboard module', () => { } as any }) - const mpcModule = MpcModule()({ + const mpcModule = MpcModule(mockChain)({ device: { browser: { name: 'Firefox', diff --git a/src/utils/chains.ts b/src/utils/chains.ts index f4bcf886fb..a5e1eaf128 100644 --- a/src/utils/chains.ts +++ b/src/utils/chains.ts @@ -16,6 +16,7 @@ export enum FEATURES { RISK_MITIGATION = 'RISK_MITIGATION', PUSH_NOTIFICATIONS = 'PUSH_NOTIFICATIONS', NATIVE_WALLETCONNECT = 'NATIVE_WALLETCONNECT', + SOCIAL_LOGIN = 'SOCIAL_LOGIN', } export const hasFeature = (chain: ChainInfo, feature: FEATURES): boolean => {