fix: Code cleanup on quoted attributes (#25783)

## **Description**

There are a number of places where we're using `{'STRING'}` where we
don't need to. This PR cleans up those cases.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25783?quickstart=1)

## **Related issues**

Fixes: N/A

## **Manual testing steps**

1. No feature/functional change

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/components/app/alert-system/alert-modal/alert-modal.tsx

@@ -177,7 +177,7 @@ function AlertDetails({
               {t('alertModalDetails')}
             </Text>
           ) : null}
-          <Box as="ul" className={'alert-modal__alert-details'} paddingLeft={6}>
+          <Box as="ul" className="alert-modal__alert-details" paddingLeft={6}>
             {selectedAlert.alertDetails?.map((detail, index) => (
               <Box as="li" key={`${selectedAlert.key}-detail-${index}`}>
                 <Text variant={TextVariant.bodyMd}>{detail}</Text>
@@ -219,11 +219,11 @@ export function AcknowledgeCheckboxBase({
     >
       <Checkbox
         label={label ?? t('alertModalAcknowledge')}
-        data-testid={'alert-modal-acknowledge-checkbox'}
+        data-testid="alert-modal-acknowledge-checkbox"
         isChecked={isConfirmed}
         onChange={onCheckboxClick}
         alignItems={AlignItems.flexStart}
-        className={'alert-modal__acknowledge-checkbox'}
+        className="alert-modal__acknowledge-checkbox"
       />
     </Box>
   );

ui/components/app/alert-system/confirm-alert-modal/confirm-alert-modal.tsx

@@ -101,7 +101,7 @@ function ConfirmDetails({
           onClick={onAlertLinkClick}
           target="_blank"
           rel="noopener noreferrer"
-          data-testid={'confirm-alert-modal-review-all-alerts'}
+          data-testid="confirm-alert-modal-review-all-alerts"
         >
           <Icon
             name={IconName.SecuritySearch}

ui/components/app/alert-system/general-alert/general-alert.tsx

@@ -77,7 +77,7 @@ function AlertDetails({
     <Box marginTop={1}>
       <Disclosure title={t('seeDetails')} variant={DisclosureVariant.Arrow}>
         {details instanceof Array ? (
-          <Box as="ul" className={'alert-modal__alert-details'} paddingLeft={6}>
+          <Box as="ul" className="alert-modal__alert-details" paddingLeft={6}>
             {details.map((detail, index) => (
               <Box as="li" key={`disclosure-detail-${index}`}>
                 <Text

ui/components/app/alert-system/multiple-alert-modal/multiple-alert-modal.tsx

@@ -51,7 +51,7 @@ function PreviousButton({
       ariaLabel={t('back')}
       size={ButtonIconSize.Sm}
       onClick={onBackButtonClick}
-      className={'confirm_nav__left_btn'}
+      className="confirm_nav__left_btn"
       data-testid="alert-modal-back-button"
       borderRadius={BorderRadius.full}
       color={IconColor.iconAlternative}
@@ -81,7 +81,7 @@ function NextButton({
       ariaLabel={t('next')}
       size={ButtonIconSize.Sm}
       onClick={onNextButtonClick}
-      className={'confirm_nav__right_btn'}
+      className="confirm_nav__right_btn"
       data-testid="alert-modal-next-button"
       borderRadius={BorderRadius.full}
       color={IconColor.iconAlternative}

ui/components/multichain/toast/toast.tsx

@@ -69,7 +69,7 @@ export const Toast = ({
       <Box display={Display.Flex} gap={4} data-testid={dataTestId}>
         {startAdornment}
         <Box>
-          <Text className={'toast-text'} variant={textVariant}>
+          <Text className="toast-text" variant={textVariant}>
             {text}
           </Text>
           {actionText && onActionClick ? (

ui/pages/confirmations/components/confirm/header/header.tsx

@@ -29,7 +29,7 @@ const Header = () => {
       className="confirm_header__wrapper"
       alignItems={AlignItems.center}
       justifyContent={JustifyContent.spaceBetween}
-      data-testid={'confirm-header'}
+      data-testid="confirm-header"
     >
       <Box alignItems={AlignItems.flexStart} display={Display.Flex} padding={4}>
         <Box display={Display.Flex} marginTop={2}>
@@ -46,13 +46,13 @@ const Header = () => {
           <Text
             color={TextColor.textDefault}
             variant={TextVariant.bodyMdMedium}
-            data-testid={'header-account-name'}
+            data-testid="header-account-name"
           >
             {fromName}
           </Text>
           <Text
             color={TextColor.textAlternative}
-            data-testid={'header-network-display-name'}
+            data-testid="header-network-display-name"
           >
             {networkDisplayName}
           </Text>

ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx

@@ -111,7 +111,7 @@ const ScrollToBottom = ({ children }: ContentProps) => {
 
         {isScrollable && !isScrolledToBottom && (
           <ButtonIcon
-            className={'confirm-scroll-to-bottom__button'}
+            className="confirm-scroll-to-bottom__button"
             onClick={scrollToBottom}
             iconName={IconName.Arrow2Down}
             ariaLabel={t('scrollDown')}

ui/pages/confirmations/components/confirm/title/title.tsx

@@ -38,7 +38,7 @@ function ConfirmBannerAlert({ ownerId }: { ownerId: string }) {
   return (
     <Box marginTop={4}>
       <GeneralAlert
-        data-testid={'confirm-banner-alert'}
+        data-testid="confirm-banner-alert"
         title={
           hasMultipleAlerts
             ? t('alertBannerMultipleAlertsTitle')

ui/pages/snap-account-redirect/components/redirect-url-icon.tsx

@@ -14,15 +14,15 @@ type RedirectUrlIconProps = {
 const RedirectUrlIcon = ({ url, onSubmit }: RedirectUrlIconProps) => {
   return (
     <ButtonIcon
-      data-testid={'snap-account-redirect-url-icon'}
+      data-testid="snap-account-redirect-url-icon"
       onClick={() => {
         global.platform.openTab({ url });
         onSubmit?.();
       }}
       iconName={IconName.Export}
       color={IconColor.primaryDefault}
       size={ButtonIconSize.Sm}
-      ariaLabel={''}
+      ariaLabel=""
     />
   );
 };

ui/pages/snap-account-redirect/create-snap-redirect.test.tsx

@@ -106,8 +106,8 @@ describe('<SnapAccountRedirect />', () => {
     const { queryByTestId } = renderWithProvider(
       <SnapAccountRedirect
         snapId={mockSnapId}
-        url={''}
-        snapName={''}
+        url=""
+        snapName=""
         isBlockedUrl={false}
         message=""
       />,