From 2f5a7db01368bb6a1257ca2451318789fcb49d7e Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Wed, 8 Nov 2023 11:05:13 +0100 Subject: [PATCH] fix: Show simple Connect button in case feature is disabled --- .../common/ConnectWallet/ConnectionCenter.tsx | 22 ++++++++++++++++--- .../common/ConnectWallet/WalletDetails.tsx | 20 +++++------------ .../__tests__/ConnectionCenter.test.tsx | 18 +++++++++++++++ src/services/mpc/SocialLoginModule.ts | 2 +- src/services/mpc/__tests__/module.test.ts | 10 ++++----- 5 files changed, 49 insertions(+), 23 deletions(-) create mode 100644 src/components/common/ConnectWallet/__tests__/ConnectionCenter.test.tsx diff --git a/src/components/common/ConnectWallet/ConnectionCenter.tsx b/src/components/common/ConnectWallet/ConnectionCenter.tsx index 8201241a16..1e04b377d2 100644 --- a/src/components/common/ConnectWallet/ConnectionCenter.tsx +++ b/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(null) const open = !!anchorEl @@ -23,6 +27,14 @@ const ConnectionCenter = (): ReactElement => { const ExpandIcon = open ? ExpandLessIcon : ExpandMoreIcon + if (!isSocialLoginEnabled) { + return ( + + + + ) + } + return ( <> @@ -60,4 +72,8 @@ const ConnectionCenter = (): ReactElement => { ) } -export default ConnectionCenter +const useIsSocialLoginEnabled = () => useHasFeature(FEATURES.SOCIAL_LOGIN) + +export default madProps(ConnectionCenter, { + isSocialLoginEnabled: useIsSocialLoginEnabled, +}) diff --git a/src/components/common/ConnectWallet/WalletDetails.tsx b/src/components/common/ConnectWallet/WalletDetails.tsx index dc39e9c05c..5f0442f50a 100644 --- a/src/components/common/ConnectWallet/WalletDetails.tsx +++ b/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 ( <> @@ -20,17 +16,13 @@ const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement = - {isSocialLoginEnabled && ( - <> - - - or - - + + + or + + - - - )} + ) } diff --git a/src/components/common/ConnectWallet/__tests__/ConnectionCenter.test.tsx b/src/components/common/ConnectWallet/__tests__/ConnectionCenter.test.tsx new file mode 100644 index 0000000000..5ca16f4512 --- /dev/null +++ b/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() + + 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() + + expect(queryByText('Connect wallet')).not.toBeInTheDocument() + expect(getByText('Connect')).toBeInTheDocument() + }) +}) diff --git a/src/services/mpc/SocialLoginModule.ts b/src/services/mpc/SocialLoginModule.ts index 3c17663fca..6e34ce89d8 100644 --- a/src/services/mpc/SocialLoginModule.ts +++ b/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' diff --git a/src/services/mpc/__tests__/module.test.ts b/src/services/mpc/__tests__/module.test.ts index f00b44691d..f90a2021c3 100644 --- a/src/services/mpc/__tests__/module.test.ts +++ b/src/services/mpc/__tests__/module.test.ts @@ -1,5 +1,5 @@ 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' @@ -7,12 +7,12 @@ 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: {