feat: update wallet menu UI and add view on explorer link

lifinance · Feb 3, 2023 · 3eb822f · 3eb822f
1 parent 9af2686
commit 3eb822f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 13 deletions.
diff --git a/packages/widget/src/components/Header/WalletHeader.tsx b/packages/widget/src/components/Header/WalletHeader.tsx
@@ -1,18 +1,19 @@
 import {
   ContentCopy as ContentCopyIcon,
   ExpandMore as ExpandMoreIcon,
+  OpenInNewOutlined as OpenInNewOutlinedIcon,
   PowerSettingsNewRounded as PowerSettingsIcon,
   WalletOutlined as WalletOutlinedIcon,
 } from '@mui/icons-material';
-import { Avatar, MenuItem } from '@mui/material';
+import { Avatar, Button, 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 { Menu } from '../Menu';
 import { HeaderAppBar, WalletButton } from './Header.style';
+import { WalletMenu } from './WalletMenu';
 
 export const WalletHeader: React.FC = () => {
   const { account } = useWallet();
@@ -96,8 +97,7 @@ const ConnectedButton = () => {
       >
         {walletAddress}
       </WalletButton>
-      <Menu
-        elevation={2}
+      <WalletMenu
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}
         onClose={handleClose}
@@ -106,11 +106,27 @@ const ConnectedButton = () => {
           <ContentCopyIcon />
           {t(`button.copyAddress`)}
         </MenuItem>
-        <MenuItem onClick={handleDisconnect} disableRipple>
-          <PowerSettingsIcon />
-          {t(`button.disconnectWallet`)}
+        <MenuItem
+          component="a"
+          onClick={handleClose}
+          href={`${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`}
+          target="_blank"
+          disableRipple
+        >
+          <OpenInNewOutlinedIcon />
+          {t(`button.viewOnExplorer`)}
         </MenuItem>
-      </Menu>
+        <Button
+          onClick={handleDisconnect}
+          fullWidth
+          startIcon={<PowerSettingsIcon />}
+          sx={{
+            marginTop: 1,
+          }}
+        >
+          {t(`button.disconnect`)}
+        </Button>
+      </WalletMenu>
     </>
   );
 };
diff --git a/packages/widget/src/components/Menu.tsx → ...dget/src/components/Header/WalletMenu.tsx b/packages/widget/src/components/Menu.tsx → ...dget/src/components/Header/WalletMenu.tsx
@@ -4,16 +4,20 @@ import { menuItemClasses } from '@mui/material/MenuItem';
 import { styled } from '@mui/material/styles';
 import { svgIconClasses } from '@mui/material/SvgIcon';
 
-export const Menu = styled(MuiMenu)(({ theme }) => ({
+export const WalletMenu = styled(MuiMenu)(({ theme }) => ({
   [`& .${menuClasses.paper}`]: {
     borderRadius: theme.shape.borderRadius,
     color: theme.palette.text.primary,
+    boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',
+    padding: theme.spacing(2),
     [`& .${menuClasses.list}`]: {
-      padding: theme.spacing(0.5, 0),
+      padding: 0,
     },
     [`& .${menuItemClasses.root}`]: {
+      borderRadius: theme.shape.borderRadiusSecondary,
+      padding: theme.spacing(1, 2, 1, 1),
       [`& .${svgIconClasses.root}`]: {
-        fontSize: 18,
+        fontSize: 20,
         color: theme.palette.text.primary,
         marginRight: theme.spacing(1.5),
       },

diff --git a/packages/widget/src/config/theme.ts b/packages/widget/src/config/theme.ts
@@ -86,7 +86,7 @@ const paletteDark = {
 
 const shape = {
   borderRadius: 12,
-  borderRadiusSecondary: 6,
+  borderRadiusSecondary: 8,
 };
 
 export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {

diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json
@@ -6,9 +6,10 @@
     "contactSupport": "Contact support",
     "continue": "Continue",
     "copyAddress": "Copy address",
+    "viewOnExplorer": "View on explorer",
     "dark": "Dark",
     "delete": "Delete",
-    "disconnectWallet": "Disconnect wallet",
+    "disconnect": "Disconnect",
     "done": "Done",
     "getGas": "Get gas",
     "hide": "Hide",