fix: Extract WalletInfo logic from AccountCenter, use madProps and wr…

…ite tests

src/components/common/ConnectWallet/AccountCenter.tsx

@@ -1,75 +1,38 @@
 import type { MouseEvent } from 'react'
-import { useContext, useState } from 'react'
-import { Box, Button, ButtonBase, Paper, Popover } from '@mui/material'
+import { useState } from 'react'
+import { Box, ButtonBase, Paper, Popover } from '@mui/material'
 import css from '@/components/common/ConnectWallet/styles.module.css'
-import EthHashInfo from '@/components/common/EthHashInfo'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import useOnboard, { switchWallet } from '@/hooks/wallets/useOnboard'
-import { useAppSelector } from '@/store'
-import { selectChainById } from '@/store/chainsSlice'
-import ChainSwitcher from '../ChainSwitcher'
-import useAddressBook from '@/hooks/useAddressBook'
 import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
-import WalletInfo from '../WalletInfo'
-import ChainIndicator from '@/components/common/ChainIndicator'
-import { isSocialLoginWallet } from '@/services/mpc/module'
-import SocialLoginInfo from '@/components/common/SocialLoginInfo'
+import WalletOverview from '../WalletOverview'
+import WalletInfo from '@/components/common/WalletInfo'
 
-import LockIcon from '@/public/images/common/lock-small.svg'
-import Link from 'next/link'
-import { AppRoutes } from '@/config/routes'
-import { useRouter } from 'next/router'
-import { MpcWalletContext } from '@/components/common/ConnectWallet/MPCWalletProvider'
-import { IS_PRODUCTION } from '@/config/constants'
-import useMPC from '@/hooks/wallets/mpc/useMPC'
-import { isMFAEnabled } from '@/components/settings/SignerAccountMFA/helper'
-
-const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
-  const { resetAccount } = useContext(MpcWalletContext)
-  const mpcCoreKit = useMPC()
-  const router = useRouter()
+export const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
-  const onboard = useOnboard()
-  const chainInfo = useAppSelector((state) => selectChainById(state, wallet.chainId))
-  const addressBook = useAddressBook()
-  const prefix = chainInfo?.shortName
-
-  const handleSwitchWallet = () => {
-    if (onboard) {
-      handleClose()
-      switchWallet(onboard)
-    }
-  }
-
-  const handleDisconnect = () => {
-    if (!wallet) return
-
-    onboard?.disconnectWallet({
-      label: wallet.label,
-    })
-
-    handleClose()
-  }
 
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+  const openWalletInfo = (event: MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget)
   }
 
-  const handleClose = () => {
+  const closeWalletInfo = () => {
     setAnchorEl(null)
   }
 
   const open = Boolean(anchorEl)
   const id = open ? 'simple-popover' : undefined
 
-  const isSocialLogin = isSocialLoginWallet(wallet.label)
-
   return (
     <>
-      <ButtonBase onClick={handleClick} aria-describedby={id} disableRipple sx={{ alignSelf: 'stretch' }}>
+      <ButtonBase
+        onClick={openWalletInfo}
+        aria-describedby={id}
+        disableRipple
+        sx={{ alignSelf: 'stretch' }}
+        data-testid="open-account-center"
+      >
         <Box className={css.buttonContainer}>
-          <WalletInfo wallet={wallet} />
+          <WalletOverview wallet={wallet} />
 
           <Box display="flex" alignItems="center" justifyContent="flex-end" marginLeft="auto">
             {open ? <ExpandLessIcon color="border" /> : <ExpandMoreIcon color="border" />}
@@ -81,7 +44,7 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
         id={id}
         open={open}
         anchorEl={anchorEl}
-        onClose={handleClose}
+        onClose={closeWalletInfo}
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'center',
@@ -93,57 +56,7 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
         sx={{ marginTop: 1 }}
       >
         <Paper className={css.popoverContainer}>
-          <Box className={css.accountContainer}>
-            <ChainIndicator />
-            <Box className={css.addressContainer}>
-              {isSocialLogin ? (
-                <>
-                  <SocialLoginInfo wallet={wallet} chainInfo={chainInfo} />
-                  {mpcCoreKit && !isMFAEnabled(mpcCoreKit) && (
-                    <Link href={{ pathname: AppRoutes.settings.signerAccount, query: router.query }} passHref>
-                      <Button
-                        fullWidth
-                        variant="contained"
-                        color="warning"
-                        className={css.warningButton}
-                        disableElevation
-                        startIcon={<LockIcon />}
-                        sx={{ mt: 1, p: 1 }}
-                        onClick={handleClose}
-                      >
-                        Add multifactor authentication
-                      </Button>
-                    </Link>
-                  )}
-                </>
-              ) : (
-                <EthHashInfo
-                  address={wallet.address}
-                  name={addressBook[wallet.address] || wallet.ens}
-                  hasExplorer
-                  showCopyButton
-                  prefix={prefix}
-                  avatarSize={32}
-                />
-              )}
-            </Box>
-          </Box>
-
-          <ChainSwitcher fullWidth />
-
-          <Button variant="contained" size="small" onClick={handleSwitchWallet} fullWidth>
-            Switch wallet
-          </Button>
-
-          <Button onClick={handleDisconnect} variant="danger" size="small" fullWidth disableElevation>
-            Disconnect
-          </Button>
-
-          {!IS_PRODUCTION && isSocialLogin && (
-            <Button onClick={resetAccount} variant="danger" size="small" fullWidth disableElevation>
-              Delete Account
-            </Button>
-          )}
+          <WalletInfo wallet={wallet} handleClose={closeWalletInfo} />
         </Paper>
       </Popover>
     </>

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

@@ -0,0 +1,47 @@
+import { render } from '@/tests/test-utils'
+import { AccountCenter } from '@/components/common/ConnectWallet/AccountCenter'
+import { type EIP1193Provider, type OnboardAPI } from '@web3-onboard/core'
+import { type NextRouter } from 'next/router'
+import { act, waitFor } from '@testing-library/react'
+
+const mockWallet = {
+  address: '0x1234567890123456789012345678901234567890',
+  chainId: '5',
+  label: '',
+  provider: null as unknown as EIP1193Provider,
+}
+
+const mockRouter = {
+  query: {},
+  pathname: '',
+} as NextRouter
+
+const mockOnboard = {
+  connectWallet: jest.fn(),
+  disconnectWallet: jest.fn(),
+  setChain: jest.fn(),
+} as unknown as OnboardAPI
+
+describe('AccountCenter', () => {
+  it('should open and close the account center on click', async () => {
+    const { getByText, getByTestId } = render(<AccountCenter wallet={mockWallet} />)
+
+    const openButton = getByTestId('open-account-center')
+
+    act(() => {
+      openButton.click()
+    })
+
+    const disconnectButton = getByText('Disconnect')
+
+    expect(disconnectButton).toBeInTheDocument()
+
+    act(() => {
+      disconnectButton.click()
+    })
+
+    await waitFor(() => {
+      expect(disconnectButton).not.toBeInTheDocument()
+    })
+  })
+})

src/components/common/ConnectWallet/styles.module.css

@@ -70,33 +70,6 @@
   min-height: 42px;
 }
 
-.accountContainer {
-  width: 100%;
-  margin-bottom: var(--space-1);
-}
-
-.accountContainer > span {
-  border-radius: 8px 8px 0 0;
-}
-
-.addressContainer {
-  border-radius: 0 0 8px 8px;
-  padding: 12px;
-  border: 1px solid var(--color-border-light);
-  border-top: 0;
-  font-size: 14px;
-}
-
-.warningButton {
-  background-color: var(--color-warning-background);
-  color: var(--color-warning-main);
-  font-size: 12px;
-}
-
-.warningButton:global.MuiButton-root:hover {
-  background-color: var(--color-warning-background);
-}
-
 @media (max-width: 599.95px) {
   .socialLoginInfo > div > div {
     display: none;