fix: Add social login feature toggle from config service

src/components/common/ConnectWallet/MPCLogin.tsx

@@ -8,8 +8,25 @@ import InfoIcon from '@/public/images/notifications/info.svg'
 
 import css from './styles.module.css'
 import useWallet from '@/hooks/wallets/useWallet'
-import { useCurrentChain } from '@/hooks/useChains'
-import chains from '@/config/chains'
+import useChains, { useCurrentChain } from '@/hooks/useChains'
+import { isSocialWalletEnabled } from '@/hooks/wallets/wallets'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/module'
+import { CGW_NAMES } from '@/hooks/wallets/consts'
+import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+
+export const _getSupportedChains = (chains: ChainInfo[]) => {
+  return chains.reduce((result: string[], currentChain) => {
+    if (CGW_NAMES.SOCIAL_LOGIN && !currentChain.disabledWallets.includes(CGW_NAMES.SOCIAL_LOGIN)) {
+      result.push(currentChain.chainName)
+    }
+    return result
+  }, [])
+}
+const useGetSupportedChains = () => {
+  const chains = useChains()
+
+  return _getSupportedChains(chains.configs)
+}
 
 const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
   const currentChain = useCurrentChain()
@@ -18,8 +35,9 @@ const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
   const wallet = useWallet()
   const loginPending = walletState === MPCWalletState.AUTHENTICATING
 
-  // TODO: Replace with feature flag from config service
-  const isMPCLoginEnabled = currentChain?.chainId === chains.gno
+  const supportedChains = useGetSupportedChains()
+
+  const isMPCLoginEnabled = isSocialWalletEnabled(currentChain)
   const isDisabled = loginPending || !isMPCLoginEnabled
 
   const login = async () => {
@@ -40,7 +58,7 @@ const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
 
   return (
     <>
-      {wallet && userInfo ? (
+      {wallet?.label === ONBOARD_MPC_MODULE_LABEL && userInfo ? (
         <>
           <Button
             variant="outlined"
@@ -94,7 +112,13 @@ const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
               ml: 0.5,
             }}
           />
-          Currently only supported on Gnosis Chain
+          Currently only supported on{' '}
+          {supportedChains.map((chain, idx) => (
+            <>
+              {chain}
+              {idx < supportedChains.length - 1 && ', '}
+            </>
+          ))}
         </Typography>
       )}
 

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

@@ -3,7 +3,7 @@ import * as useWallet from '@/hooks/wallets/useWallet'
 import * as useMPCWallet from '@/hooks/wallets/mpc/useMPCWallet'
 import * as chains from '@/hooks/useChains'
 
-import MPCLogin from '../MPCLogin'
+import MPCLogin, { _getSupportedChains } from '../MPCLogin'
 import { hexZeroPad } from '@ethersproject/bytes'
 import { type EIP1193Provider } from '@web3-onboard/common'
 import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/module'
@@ -99,4 +99,27 @@ describe('MPCLogin', () => {
     expect(result.getByText('Currently only supported on Gnosis Chain')).toBeInTheDocument()
     expect(await result.findByRole('button')).toBeDisabled()
   })
+
+  describe('getSupportedChains', () => {
+    it('returns chain names where social login is enabled', () => {
+      const mockEthereumChain = { chainId: '1', chainName: 'Ethereum', disabledWallets: ['socialLogin'] } as ChainInfo
+      const mockGnosisChain = { chainId: '100', chainName: 'Gnosis Chain', disabledWallets: ['Coinbase'] } as ChainInfo
+      const mockGoerliChain = { chainId: '5', chainName: 'Goerli', disabledWallets: ['TallyHo'] } as ChainInfo
+
+      const mockChains = [mockEthereumChain, mockGnosisChain, mockGoerliChain]
+      const result = _getSupportedChains(mockChains)
+
+      expect(result).toEqual(['Gnosis Chain', 'Goerli'])
+    })
+
+    it('returns an empty if social login is not enabled on any chain', () => {
+      const mockEthereumChain = { chainId: '1', chainName: 'Ethereum', disabledWallets: ['socialLogin'] } as ChainInfo
+      const mockGoerliChain = { chainId: '5', chainName: 'Goerli', disabledWallets: ['socialLogin'] } as ChainInfo
+
+      const mockChains = [mockEthereumChain, mockGoerliChain]
+      const result = _getSupportedChains(mockChains)
+
+      expect(result).toEqual([])
+    })
+  })
 })

src/hooks/wallets/wallets.ts

@@ -66,13 +66,17 @@ export const getSupportedWallets = (chain: ChainInfo): WalletInit[] => {
   if (window.Cypress && CYPRESS_MNEMONIC) {
     return [e2eWalletModule(chain.rpcUri)]
   }
-  const enabledWallets = Object.entries(WALLET_MODULES).filter(
-    ([key]) => key === WALLET_KEYS.SOCIAL || isWalletSupported(chain.disabledWallets, key),
-  )
+  const enabledWallets = Object.entries(WALLET_MODULES).filter(([key]) => isWalletSupported(chain.disabledWallets, key))
 
   if (enabledWallets.length === 0) {
     return [WALLET_MODULES.INJECTED(chain)]
   }
 
   return enabledWallets.map(([, module]) => module(chain))
 }
+
+export const isSocialWalletEnabled = (chain: ChainInfo | undefined): boolean => {
+  if (!chain) return false
+
+  return chain.disabledWallets.every((label) => label !== CGW_NAMES.SOCIAL_LOGIN)
+}