From d6f5479f3a7f4bc3b194a4efd5fa2b5d280cef3b Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Mon, 16 Oct 2023 11:51:13 +0200
Subject: [PATCH] fix: Add social login feature toggle from config service

---
 .../common/ConnectWallet/MPCLogin.tsx         | 36 +++++++++++++++----
 .../ConnectWallet/__tests__/MPCLogin.test.tsx | 25 ++++++++++++-
 src/hooks/wallets/wallets.ts                  | 10 ++++--
 3 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/src/components/common/ConnectWallet/MPCLogin.tsx b/src/components/common/ConnectWallet/MPCLogin.tsx
index 34ca5b51c4..3836e00619 100644
--- a/src/components/common/ConnectWallet/MPCLogin.tsx
+++ b/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>
       )}
 
diff --git a/src/components/common/ConnectWallet/__tests__/MPCLogin.test.tsx b/src/components/common/ConnectWallet/__tests__/MPCLogin.test.tsx
index 47f56a9ada..f12f095239 100644
--- a/src/components/common/ConnectWallet/__tests__/MPCLogin.test.tsx
+++ b/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([])
+    })
+  })
 })
diff --git a/src/hooks/wallets/wallets.ts b/src/hooks/wallets/wallets.ts
index ced8503037..50b3aeeb44 100644
--- a/src/hooks/wallets/wallets.ts
+++ b/src/hooks/wallets/wallets.ts
@@ -66,9 +66,7 @@ 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)]
@@ -76,3 +74,9 @@ export const getSupportedWallets = (chain: ChainInfo): WalletInit[] => {
 
   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)
+}