fix: Show simple Connect button in case feature is disabled

src/components/common/ConnectWallet/ConnectionCenter.tsx

@@ -1,4 +1,8 @@
-import { Popover, ButtonBase, Typography, Paper } from '@mui/material'
+import ConnectWalletButton from '@/components/common/ConnectWallet/ConnectWalletButton'
+import { useHasFeature } from '@/hooks/useChains'
+import { FEATURES } from '@/utils/chains'
+import madProps from '@/utils/mad-props'
+import { Popover, ButtonBase, Typography, Paper, Box } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 import classnames from 'classnames'
@@ -9,7 +13,7 @@ import WalletDetails from '@/components/common/ConnectWallet/WalletDetails'
 
 import css from '@/components/common/ConnectWallet/styles.module.css'
 
-const ConnectionCenter = (): ReactElement => {
+export const ConnectionCenter = ({ isSocialLoginEnabled }: { isSocialLoginEnabled: boolean }): ReactElement => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
   const open = !!anchorEl
 
@@ -23,6 +27,14 @@ const ConnectionCenter = (): ReactElement => {
 
   const ExpandIcon = open ? ExpandLessIcon : ExpandMoreIcon
 
+  if (!isSocialLoginEnabled) {
+    return (
+      <Box className={css.buttonContainer}>
+        <ConnectWalletButton />
+      </Box>
+    )
+  }
+
   return (
     <>
       <ButtonBase disableRipple onClick={handleClick} className={css.buttonContainer}>
@@ -60,4 +72,8 @@ const ConnectionCenter = (): ReactElement => {
   )
 }
 
-export default ConnectionCenter
+const useIsSocialLoginEnabled = () => useHasFeature(FEATURES.SOCIAL_LOGIN)
+
+export default madProps(ConnectionCenter, {
+  isSocialLoginEnabled: useIsSocialLoginEnabled,
+})

src/components/common/ConnectWallet/WalletDetails.tsx

@@ -1,5 +1,3 @@
-import { useHasFeature } from '@/hooks/useChains'
-import { FEATURES } from '@/utils/chains'
 import { Box, Divider, SvgIcon, Typography } from '@mui/material'
 import type { ReactElement } from 'react'
 
@@ -8,8 +6,6 @@ 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}>
@@ -20,17 +16,13 @@ const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement =
 
       <WalletLogin onLogin={onConnect} />
 
-      {isSocialLoginEnabled && (
-        <>
-          <Divider sx={{ width: '100%' }}>
-            <Typography color="text.secondary" fontWeight={700} variant="overline">
-              or
-            </Typography>
-          </Divider>
+      <Divider sx={{ width: '100%' }}>
+        <Typography color="text.secondary" fontWeight={700} variant="overline">
+          or
+        </Typography>
+      </Divider>
 
-          <SocialSigner onRequirePassword={onConnect} />
-        </>
-      )}
+      <SocialSigner onRequirePassword={onConnect} />
     </>
   )
 }

src/components/common/ConnectWallet/__tests__/ConnectionCenter.test.tsx

@@ -0,0 +1,18 @@
+import { ConnectionCenter } from '@/components/common/ConnectWallet/ConnectionCenter'
+import { render } from '@/tests/test-utils'
+
+describe('ConnectionCenter', () => {
+  it('displays a Connect wallet button if the social login feature is enabled', () => {
+    const { getByText, queryByText } = render(<ConnectionCenter isSocialLoginEnabled={true} />)
+
+    expect(getByText('Connect wallet')).toBeInTheDocument()
+    expect(queryByText('Connect')).not.toBeInTheDocument()
+  })
+
+  it('displays the ConnectWalletButton if the social login feature is disabled', () => {
+    const { getByText, queryByText } = render(<ConnectionCenter isSocialLoginEnabled={false} />)
+
+    expect(queryByText('Connect wallet')).not.toBeInTheDocument()
+    expect(getByText('Connect')).toBeInTheDocument()
+  })
+})

src/services/mpc/SocialLoginModule.ts

@@ -3,7 +3,7 @@ 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 { 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'

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

@@ -1,18 +1,18 @@
 import { chainBuilder } from '@/tests/builders/chains'
-import * as feature from '@/utils/chains'
+import { FEATURES } 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()
+const mockChain = chainBuilder()
+  // @ts-expect-error - we are using a local FEATURES enum
+  .with({ features: [FEATURES.SOCIAL_LOGIN] })
+  .build()
 
 describe('MPC Onboard module', () => {
-  beforeAll(() => {
-    jest.spyOn(feature, 'hasFeature').mockReturnValue(true)
-  })
   it('should return correct metadata', async () => {
     const mpcModule = MpcModule(mockChain)({
       device: {