fix: Add feature flag for social login

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 (
     <>
       <Box my={1}>
@@ -16,13 +20,17 @@ const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement =
 
       <WalletLogin onLogin={onConnect} />
 
-      <Divider sx={{ width: '100%' }}>
-        <Typography color="text.secondary" fontWeight={700} variant="overline">
-          or
-        </Typography>
-      </Divider>
+      {isSocialLoginEnabled && (
+        <>
+          <Divider sx={{ width: '100%' }}>
+            <Typography color="text.secondary" fontWeight={700} variant="overline">
+              or
+            </Typography>
+          </Divider>
 
-      <SocialSigner onRequirePassword={onConnect} />
+          <SocialSigner onRequirePassword={onConnect} />
+        </>
+      )}
     </>
   )
 }

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 = () => {
         </Typography>
         <WalletLogin onLogin={continueToCreation} />
 
-        <Divider sx={{ mt: 2, mb: 2, width: '100%' }}>
-          <Typography color="text.secondary" fontWeight={700} variant="overline">
-            or
-          </Typography>
-        </Divider>
+        {isSocialLoginEnabled && (
+          <>
+            <Divider sx={{ mt: 2, mb: 2, width: '100%' }}>
+              <Typography color="text.secondary" fontWeight={700} variant="overline">
+                or
+              </Typography>
+            </Divider>
 
-        <SocialSigner onLogin={continueToCreation} />
+            <SocialSigner onLogin={continueToCreation} />
+          </>
+        )}
 
         <Typography mt={2} textAlign="center">
           Already have a Safe Account?

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(),

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,

src/services/mpc/__tests__/module.test.ts

@@ -1,13 +1,20 @@
+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'
 
 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',

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 => {