From 198bedd02c2902912bb5be031fc743688ac91ef1 Mon Sep 17 00:00:00 2001
From: Devin <168687171+Devin-Apps@users.noreply.github.com>
Date: Tue, 2 Jul 2024 04:30:30 +0530
Subject: [PATCH] refactor: Replace deprecated mixins with Text component in
 selected-account.component.js (#25262)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

Replaced deprecated mixins with Text component in
`selected-account.component.js`. The change aims to modernize the
codebase by using the Text component from the design system, ensuring
consistency and maintainability.

Devin Run Link:
https://preview.devin.ai/devin/6dcddd7b3ee2456ca004b34d033b0d82

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

## **Related issues**

Partially Fixes:
https://github.com/MetaMask/metamask-extension/issues/20496

## **Manual testing steps**

1. Go to the latest build of storybook in this PR
2. Verify the "SelectedAccount" component displays correctly with the
updated Text component.

## **Screenshots/Recordings**

### **Before**


![](https://api.devin.ai/attachments/ad6f5c71-8714-4f0d-9675-d36481abbafa/before_changes_selected-account.component.png)

### **After**

<img width="1653" alt="Screenshot 2024-06-12 at 21 55 36"
src="https://github.com/MetaMask/metamask-extension/assets/168687171/3e05ef54-8272-4c48-8637-ddedcf2f3830">

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] 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**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.

---------

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
Co-authored-by: Shreyasi Mandal <shreyasi18sia@gmail.com>
---
 ui/components/app/selected-account/index.scss | 21 -----------
 .../selected-account.component.js             | 35 +++++++++++++++----
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/ui/components/app/selected-account/index.scss b/ui/components/app/selected-account/index.scss
index 5c2be851e62c..bf4b3887c4f8 100644
--- a/ui/components/app/selected-account/index.scss
+++ b/ui/components/app/selected-account/index.scss
@@ -11,27 +11,6 @@
     width: 100%;
   }
 
-  &__name {
-    @include design-system.H5;
-
-    width: 100%;
-    font-weight: 500;
-    color: var(--color-text-default);
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    text-align: center;
-    margin-bottom: 4px;
-  }
-
-  &__address {
-    @include design-system.H7;
-
-    color: var(--color-text-alternative);
-    display: flex;
-    align-items: center;
-  }
-
   &__clickable {
     display: flex;
     flex-direction: column;
diff --git a/ui/components/app/selected-account/selected-account.component.js b/ui/components/app/selected-account/selected-account.component.js
index 0ab706deab69..ee13d7f786d3 100644
--- a/ui/components/app/selected-account/selected-account.component.js
+++ b/ui/components/app/selected-account/selected-account.component.js
@@ -11,8 +11,17 @@ import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
 import CustodyLabels from '../../institutional/custody-labels/custody-labels';
 ///: END:ONLY_INCLUDE_IF
-import { Icon, IconName, IconSize } from '../../component-library';
-import { IconColor } from '../../../helpers/constants/design-system';
+import { Icon, IconName, IconSize, Text } from '../../component-library';
+import {
+  IconColor,
+  TextVariant,
+  TextColor,
+  TextAlign,
+  BlockSize,
+  Display,
+  FontWeight,
+  AlignItems,
+} from '../../../helpers/constants/design-system';
 import { COPY_OPTIONS } from '../../../../shared/constants/copy';
 
 class SelectedAccount extends Component {
@@ -108,10 +117,24 @@ class SelectedAccount extends Component {
               copyToClipboard(checksummedAddress, COPY_OPTIONS);
             }}
           >
-            <div className="selected-account__name">
+            <Text
+              data-testid="selected-account-name"
+              width={BlockSize.Full}
+              fontWeight={FontWeight.Medium}
+              color={TextColor.textDefault}
+              ellipsis
+              textAlign={TextAlign.Center}
+              marginBottom={1}
+            >
               {selectedAccount.metadata.name}
-            </div>
-            <div className="selected-account__address">
+            </Text>
+            <Text
+              data-testid="selected-account-address"
+              variant={TextVariant.bodyXs}
+              color={TextColor.textAlternative}
+              display={Display.Flex}
+              alignItems={AlignItems.Center}
+            >
               {
                 ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
                 showCustodyLabels && <CustodyLabels labels={custodyLabels} />
@@ -132,7 +155,7 @@ class SelectedAccount extends Component {
                   />
                 </div>
               )}
-            </div>
+            </Text>
           </button>
         </Tooltip>
       </div>