Merge pull request #324 from aptos-labs/mui-wallet-selector-updates

Update MUI wallet selector to new UI layout
aptos-labs · Jun 14, 2024 · 48cdebf · 48cdebf
2 parents 4ead015 + 65e4d1c
commit 48cdebf
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 233 deletions.
diff --git a/.changeset/cold-buckets-switch.md b/.changeset/cold-buckets-switch.md
@@ -0,0 +1,5 @@
+---
+"@aptos-labs/wallet-adapter-mui-design": minor
+---
+
+Update `WalletConnector` to new UI layout for Aptos Connect
diff --git a/packages/wallet-adapter-mui-design/src/WalletButton.tsx b/packages/wallet-adapter-mui-design/src/WalletButton.tsx
@@ -1,10 +1,8 @@
+import { truncateAddress, useWallet } from "@aptos-labs/wallet-adapter-react";
+import { AccountBalanceWalletOutlined as AccountBalanceWalletOutlinedIcon } from "@mui/icons-material";
 import { Avatar, Button, Typography } from "@mui/material";
-import { useState } from "react";
-import { useWallet } from "@aptos-labs/wallet-adapter-react";
+import React, { useState } from "react";
 import WalletMenu from "./WalletMenu";
-import React from "react";
-import { truncateAddress } from "./utils";
-import { AccountBalanceWalletOutlined as AccountBalanceWalletOutlinedIcon } from "@mui/icons-material";
 
 type WalletButtonProps = {
   handleModalOpen: () => void;
@@ -50,9 +48,9 @@ export default function WalletButton({
               sx={{ width: 24, height: 24 }}
             />
             <Typography noWrap ml={2}>
-              {account?.ansName
-                ? account?.ansName
-                : truncateAddress(account?.address!)}
+              {account?.ansName ||
+                truncateAddress(account?.address) ||
+                "Unknown"}
             </Typography>
           </>
         ) : (

diff --git a/packages/wallet-adapter-mui-design/src/WalletMenu.tsx b/packages/wallet-adapter-mui-design/src/WalletMenu.tsx
@@ -1,3 +1,4 @@
+import { useWallet } from "@aptos-labs/wallet-adapter-react";
 import {
   List,
   ListItem,
@@ -6,8 +7,7 @@ import {
   Popover,
   Tooltip,
 } from "@mui/material";
-import { useWallet } from "@aptos-labs/wallet-adapter-react";
-import React, { useState } from "react";
+import { useState } from "react";
 
 type WalletMenuProps = {
   popoverAnchor: HTMLButtonElement | null;
@@ -36,7 +36,7 @@ export default function WalletMenu({
 
   const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
 
-  const copyAddress = async (event: React.MouseEvent<HTMLDivElement>) => {
+  const copyAddress = async () => {
     await navigator.clipboard.writeText(account?.address!);
 
     setTooltipOpen(true);
@@ -72,11 +72,13 @@ export default function WalletMenu({
             </ListItemButton>
           </ListItem>
         </Tooltip>
-        <ListItem disablePadding>
-          <ListItemButton onClick={onAccountOptionClicked}>
-            <ListItemText primary="Account" />
-          </ListItemButton>
-        </ListItem>
+        {!!handleNavigate && (
+          <ListItem disablePadding>
+            <ListItemButton onClick={onAccountOptionClicked}>
+              <ListItemText primary="Account" />
+            </ListItemButton>
+          </ListItem>
+        )}
         <ListItem disablePadding>
           <ListItemButton onClick={handleLogout}>
             <ListItemText primary="Logout" />