refactor: account popover

Author: KirillKirill

packages/apps/staking/src/components/Account/index.tsx

@@ -1,18 +1,19 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import {
   Avatar,
-  Box,
   Button,
+  Popover,
   Typography,
   useMediaQuery,
   useTheme,
 } from '@mui/material';
 import { useAccount, useDisconnect, useEnsAvatar, useEnsName } from 'wagmi';
 
 import { formatAddress } from '../../utils/string';
-import { AvatarIcon } from '../../icons';
+import { AvatarIcon, ChevronIcon, PowerIcon } from '../../icons';
 
 const Account: FC = () => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const { address } = useAccount();
   const { disconnect } = useDisconnect();
   const { data: ensName } = useEnsName({ address });
@@ -23,16 +24,25 @@ const Account: FC = () => {
 
   const formattedAddress = formatAddress(address);
 
+  const handleClosePopover = () => setAnchorEl(null);
+
   return (
     <>
-      <Box
-        display="flex"
-        alignItems="center"
-        gap={1}
-        bgcolor="#f6f7fe"
-        borderRadius="4px"
-        paddingX={1}
-        height={isMobile ? '42px' : '100%'}
+      <Button
+        aria-describedby="account-popover"
+        onClick={(event) => setAnchorEl(event.currentTarget)}
+        sx={{
+          bgcolor: '#f6f7fe',
+          borderRadius: '4px',
+          height: isMobile ? '42px' : '100%',
+          paddingX: 1,
+          fontWeight: 600,
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+          '& .MuiTouchRipple-root': {
+            display: 'none',
+          },
+        }}
       >
         {ensAvatar ? (
           <Avatar
@@ -43,20 +53,60 @@ const Account: FC = () => {
         ) : (
           <AvatarIcon />
         )}
-        <Typography variant="body2" color="textPrimary" fontWeight={600}>
+        <Typography variant="body2" color="textPrimary" paddingX={1}>
           {formattedAddress}
         </Typography>
-      </Box>
-      <Button
-        variant="contained"
-        size="medium"
-        onClick={() => disconnect()}
-        sx={{
-          height: isMobile ? '42px' : '100%',
+        <ChevronIcon
+          sx={{
+            transform: anchorEl ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: 'transform 0.2s ease-in-out',
+          }}
+        />
+      </Button>
+      <Popover
+        id="account-popover"
+        open={!!anchorEl}
+        onClose={handleClosePopover}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        slotProps={{
+          paper: {
+            elevation: 0,
+            sx: {
+              backgroundColor: '#f6f7fe',
+              width: anchorEl?.getBoundingClientRect().width,
+              minWidth: 'fit-content',
+              borderTopLeftRadius: 0,
+              borderTopRightRadius: 0,
+              border: 'none',
+            },
+          },
         }}
       >
-        Disconnect
-      </Button>
+        <Button
+          onClick={() => disconnect()}
+          sx={{
+            color: 'sky.main',
+            padding: 1,
+            width: '100%',
+            gap: 1,
+            '&:hover': {
+              color: 'primary.main',
+              backgroundColor: 'unset',
+            },
+          }}
+        >
+          <PowerIcon />
+          Disconnect wallet
+        </Button>
+      </Popover>
     </>
   );
 };

packages/apps/staking/src/icons/index.tsx

@@ -222,3 +222,25 @@ export const CloseIcon: FC<SvgIconProps> = (props) => {
     </SvgIcon>
   );
 };
+
+export const ChevronIcon: FC<SvgIconProps> = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24" fill="none">
+      <path
+        fill="#24046D"
+        d="M16.59 8.295L12 12.875L7.41 8.295L6 9.705L12 15.705L18 9.705L16.59 8.295Z"
+      />
+    </SvgIcon>
+  );
+};
+
+export const PowerIcon: FC<SvgIconProps> = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24" fill="none">
+      <path
+        fill="currentColor"
+        d="M13.5 3H11.5V13H13.5V3ZM18.33 5.17L16.91 6.59C18.49 7.86 19.5 9.81 19.5 12C19.5 15.87 16.37 19 12.5 19C8.63 19 5.5 15.87 5.5 12C5.5 9.81 6.51 7.86 8.08 6.58L6.67 5.17C4.73 6.82 3.5 9.26 3.5 12C3.5 16.97 7.53 21 12.5 21C17.47 21 21.5 16.97 21.5 12C21.5 9.26 20.27 6.82 18.33 5.17Z"
+      />
+    </SvgIcon>
+  );
+};