feat: new wallet header menu

packages/widget/src/components/Header/Header.style.ts

@@ -1,4 +1,5 @@
-import { AppBar, Box } from '@mui/material';
+import { AppBar, Box, Button } from '@mui/material';
+import { buttonClasses } from '@mui/material/Button';
 import { alpha, styled } from '@mui/material/styles';
 
 export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
@@ -24,3 +25,22 @@ export const Container = styled(Box, {
   top: 0,
   zIndex: 1200,
 }));
+
+export const WalletButton = styled(Button)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  backgroundColor: 'transparent',
+  padding: theme.spacing(1, 1.5),
+  maxHeight: 40,
+  fontSize: '0.875rem',
+  fontWeight: 600,
+  borderRadius: theme.shape.borderRadius * 2,
+  '&:hover': {
+    backgroundColor:
+      theme.palette.mode === 'light'
+        ? alpha(theme.palette.common.black, 0.04)
+        : alpha(theme.palette.common.white, 0.08),
+  },
+  [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
+    fontSize: '24px',
+  },
+}));

packages/widget/src/components/Header/NavigationHeader.tsx

@@ -92,8 +92,10 @@ export const NavigationHeader: React.FC = () => {
               <Tooltip title={t(`header.settings`)} enterDelay={400} arrow>
                 <IconButton
                   size="medium"
-                  edge="end"
                   onClick={() => navigate(navigationRoutes.settings)}
+                  sx={{
+                    marginRight: -1.25,
+                  }}
                 >
                   <SettingsIcon />
                 </IconButton>

packages/widget/src/components/Header/WalletHeader.tsx

@@ -1,61 +1,30 @@
 import {
+  ContentCopy as ContentCopyIcon,
+  ExpandMore as ExpandMoreIcon,
   Logout as LogoutIcon,
   WalletOutlined as WalletOutlinedIcon,
 } from '@mui/icons-material';
-import { Box, IconButton, Typography } from '@mui/material';
+import { Avatar, MenuItem } from '@mui/material';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { useChain } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes, shortenWalletAddress } from '../../utils';
-import { HeaderAppBar } from './Header.style';
+import { Menu } from '../Menu';
+import { HeaderAppBar, WalletButton } from './Header.style';
 
 export const WalletHeader: React.FC = () => {
-  const { t } = useTranslation();
-  const { account, disconnect } = useWallet();
-  const walletAddress = shortenWalletAddress(account.address);
-
+  const { account } = useWallet();
   return (
-    <HeaderAppBar elevation={0}>
-      {walletAddress ? (
-        <>
-          <Box
-            sx={{
-              display: 'flex',
-              flex: 1,
-              flexDirection: 'column',
-            }}
-            mr={0.5}
-          >
-            <Typography variant="caption" align="right">
-              {t(`header.walletConnected`)}
-            </Typography>
-            <Typography variant="body2" align="right" fontWeight="600">
-              {walletAddress}
-            </Typography>
-          </Box>
-          <IconButton size="medium" edge="end" onClick={disconnect}>
-            <LogoutIcon />
-          </IconButton>
-        </>
-      ) : (
-        <>
-          <Typography
-            variant="body2"
-            align="right"
-            fontWeight="600"
-            flex={1}
-            mr={0.5}
-          >
-            {t(`header.connectWallet`)}
-          </Typography>
-          <ConnectButton />
-        </>
-      )}
+    <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>
+      {account.isActive ? <ConnectedButton /> : <ConnectButton />}
     </HeaderAppBar>
   );
 };
 
 const ConnectButton = () => {
+  const { t } = useTranslation();
   const { pathname } = useLocation();
   const config = useWidgetConfig();
   const { connect: walletConnect } = useWallet();
@@ -68,14 +37,80 @@ const ConnectButton = () => {
     navigate(navigationRoutes.selectWallet);
   };
   return (
-    <IconButton
-      size="medium"
-      edge="end"
+    <WalletButton
+      endIcon={<WalletOutlinedIcon />}
       onClick={
         !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined
       }
+      sx={{
+        marginRight: -1.25,
+      }}
     >
-      <WalletOutlinedIcon />
-    </IconButton>
+      {t(`button.connectWallet`)}
+    </WalletButton>
+  );
+};
+
+const ConnectedButton = () => {
+  const { t } = useTranslation();
+  const { account, disconnect } = useWallet();
+  const walletAddress = shortenWalletAddress(account.address);
+  const { chain } = useChain(account.chainId);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleDisconnect = () => {
+    disconnect();
+    handleClose();
+  };
+
+  const handleCopyAddress = async () => {
+    await navigator.clipboard.writeText(account.address ?? '');
+    handleClose();
+  };
+
+  return (
+    <>
+      <WalletButton
+        endIcon={<ExpandMoreIcon />}
+        startIcon={
+          <Avatar
+            src={chain?.logoURI}
+            alt={chain?.key}
+            sx={{ width: 24, height: 24 }}
+          >
+            {chain?.name[0]}
+          </Avatar>
+        }
+        sx={{
+          marginRight: -1.25,
+        }}
+        onClick={handleClick}
+      >
+        {walletAddress}
+      </WalletButton>
+      <Menu
+        elevation={2}
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={handleCopyAddress} disableRipple dense>
+          <ContentCopyIcon />
+          {t(`button.copyAddress`)}
+        </MenuItem>
+        <MenuItem onClick={handleDisconnect} disableRipple dense>
+          <LogoutIcon />
+          {t(`button.disconnectWallet`)}
+        </MenuItem>
+      </Menu>
+    </>
   );
 };

packages/widget/src/components/Menu.tsx

@@ -0,0 +1,22 @@
+import { Menu as MuiMenu } from '@mui/material';
+import { menuClasses } from '@mui/material/Menu';
+import { menuItemClasses } from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
+import { svgIconClasses } from '@mui/material/SvgIcon';
+
+export const Menu = styled(MuiMenu)(({ theme }) => ({
+  [`& .${menuClasses.paper}`]: {
+    borderRadius: theme.shape.borderRadiusSecondary,
+    color: theme.palette.text.primary,
+    [`& .${menuClasses.list}`]: {
+      padding: theme.spacing(0.5, 0),
+    },
+    [`& .${menuItemClasses.root}`]: {
+      [`& .${svgIconClasses.root}`]: {
+        fontSize: 18,
+        color: theme.palette.text.primary,
+        marginRight: theme.spacing(1.5),
+      },
+    },
+  },
+}));

packages/widget/src/hooks/useChain.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useChains } from './useChains';
 
-export const useChain = (chainId: number) => {
+export const useChain = (chainId?: number) => {
   const { chains, isLoading } = useChains();
 
   const chain = useMemo(() => {

packages/widget/src/i18n/en.json

@@ -4,8 +4,6 @@
     "title": "Language"
   },
   "header": {
-    "walletConnected": "Wallet connected",
-    "connectWallet": "Connect wallet",
     "selectWallet": "Select your wallet",
     "swap": "Swap",
     "from": "Swap from",
@@ -19,6 +17,7 @@
   },
   "button": {
     "connectWallet": "Connect wallet",
+    "disconnectWallet": "Disconnect wallet",
     "swap": "Swap",
     "reviewSwap": "Review swap",
     "startSwap": "Start swap",
@@ -38,6 +37,7 @@
     "max": "max",
     "showAll": "Show all",
     "contactSupport": "Contact support",
+    "copyAddress": "Copy address",
     "lifiSwap": "LI.FI Swap"
   },
   "swap": {