chore: add data-testids to account mgmt UI

src/pages/Accounts/AccountDetailsView.tsx

@@ -116,6 +116,7 @@ export const AccountDetailsView = () => {
         }}
       >
         <IconButton
+          data-testid="account-details-back-btn"
           onClick={() => history.replace('/accounts')}
           sx={{
             padding: 0.25,
@@ -134,6 +135,7 @@ export const AccountDetailsView = () => {
         <OverflowingTypography
           variant="h4"
           sx={{ mr: 2, fontSize: 24, flexGrow: 1 }}
+          data-testid="account-details-name"
         >
           {account.name}
         </OverflowingTypography>

src/pages/Accounts/Accounts.tsx

@@ -133,6 +133,7 @@ export function Accounts() {
             },
           }}
           disableRipple
+          data-testid="accounts-back-btn"
         >
           <ChevronLeftIcon size={32} />
         </IconButton>
@@ -151,7 +152,11 @@ export function Accounts() {
             gap: 2,
           }}
         >
-          <OverflowingTypography variant="caption" color="text.secondary">
+          <OverflowingTypography
+            variant="caption"
+            color="text.secondary"
+            data-testid="account-management-active-wallet"
+          >
             {t('Currently using {{walletName}}', {
               walletName: isPrimaryAccount(active)
                 ? walletDetails?.name
@@ -183,7 +188,11 @@ export function Accounts() {
             gap: 2,
           }}
         >
-          <OverflowingTypography variant="h5" fontSize={18}>
+          <OverflowingTypography
+            variant="h5"
+            fontSize={18}
+            data-testid="account-management-active-account"
+          >
             {active?.name}
           </OverflowingTypography>
           <Typography variant="h5" fontSize={18}>

src/pages/Accounts/components/AccountItem.tsx

@@ -172,7 +172,7 @@ export const AccountItem = forwardRef(
           type: account.type,
         });
       },
-      [address, account.type, capture, network?.vmName, toast]
+      [address, account.type, capture, network?.vmName, toast],
     );
 
     return (
@@ -348,8 +348,8 @@ const getCopyEventNameByNetworkType = (type: NetworkVMType) => {
     type === NetworkVMType.BITCOIN
       ? 'Btc'
       : type === NetworkVMType.EVM
-      ? 'Eth'
-      : type;
+        ? 'Eth'
+        : type;
 
   return `AccountSelector${normalizedType}AddressCopied`;
 };

src/pages/Accounts/components/AccountName.tsx

@@ -69,6 +69,7 @@ export default function AccountName({
             e.stopPropagation();
             promptRename();
           }}
+          data-testid="rename-account-btn"
         >
           <PencilRoundIcon size={16} />
         </IconButton>

src/pages/Accounts/components/RenameDialog.tsx

@@ -61,6 +61,7 @@ export const RenameDialog = ({
             ),
           }}
           {...keyboardShortcuts}
+          data-testid="rename-account-input"
         />
       </DialogContent>
       <Stack

src/pages/Accounts/components/WalletHeader.tsx

@@ -88,6 +88,7 @@ export default function WalletHeader({
           fontSize={14}
           fontWeight={600}
           lineHeight="16px"
+          data-testid="wallet-name"
         >
           {walletDetails?.name ?? name}
         </OverflowingTypography>
@@ -97,6 +98,7 @@ export default function WalletHeader({
             sx={{ fontSize: 10, height: 16 }}
             color="success"
             label={t('Active')}
+            data-testid="wallet-active-chip"
           />
         </Grow>
         {/* Section for the imported accounts has no WalletDetails, therefore cannot be renamed */}