From 1cc451c7dd29072e7405aeb4ed8b0885d07575ac Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 22 Feb 2024 10:01:10 -0600
Subject: [PATCH 1/2] Fix #23095 - Fix long account name ellipsizing (#23096)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

Fixes long account name ellipsizing in the header's AccountPicker.

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

## **Related issues**

Fixes: #23095 23095

## **Manual testing steps**

1. Create a long account name
2. See it ellipsized

## **Screenshots/Recordings**

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

### **Before**
![Screenshot 2024-02-21 at 16 06
43](https://github.com/MetaMask/metamask-extension/assets/46655/06e49f01-5b66-4da4-9878-c8cc678beae8)



### **After**

<img width="725" alt="SCR-20240221-kvri"
src="https://github.com/MetaMask/metamask-extension/assets/46655/9c42a0f2-ba7d-40af-b588-2c4bf3b04d55">


## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained what problem this PR is solving and how it
is solved.
- [ ] I've linked related issues
- [ ] I've included manual testing steps
- [ ] I've included screenshots/recordings if applicable
- [ ] 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.
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **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.
---
 .../app-header/__snapshots__/app-header.test.js.snap        | 2 +-
 ui/components/multichain/app-header/app-header.js           | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
index 395c5765dbbf..5bafc35a2208 100644
--- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
+++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
@@ -228,7 +228,7 @@ exports[`App Header should match snapshot 1`] = `
         </button>
       </div>
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center"
+        class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--color-text-default"
       >
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-base--ellipsis multichain-account-picker mm-text--body-md-medium mm-text--ellipsis mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--gap-2 mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent mm-box--rounded-lg"
diff --git a/ui/components/multichain/app-header/app-header.js b/ui/components/multichain/app-header/app-header.js
index 8eef5eef2063..4c3580eef2f5 100644
--- a/ui/components/multichain/app-header/app-header.js
+++ b/ui/components/multichain/app-header/app-header.js
@@ -292,10 +292,12 @@ export const AppHeader = ({ location }) => {
               ) : null}
 
               {internalAccount ? (
-                <Box
+                <Text
+                  as="div"
                   display={Display.Flex}
                   flexDirection={FlexDirection.Column}
                   alignItems={AlignItems.center}
+                  ellipsis
                 >
                   <AccountPicker
                     address={internalAccount.address}
@@ -350,7 +352,7 @@ export const AppHeader = ({ location }) => {
                       </Text>
                     </ButtonBase>
                   </Tooltip>
-                </Box>
+                </Text>
               ) : null}
               <Box
                 display={Display.Flex}

From 7fcddffb128b309b208b785ea02617a97cc38b9e Mon Sep 17 00:00:00 2001
From: Victor Thomas <10986371+vthomas13@users.noreply.github.com>
Date: Thu, 22 Feb 2024 11:16:03 -0500
Subject: [PATCH 2/2] Fix NaN issue in Product Tour Popover (#23100)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**
The Popover is displaying NaN because the '/' was not being treated as a
string.
Fixed that and added a test to help prevent it in the future.
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

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

## **Related issues**

Fixes:
https://github.com/MetaMask/metamask-extension/pull/22905/files#r1498090474

## **Manual testing steps**

1. Fresh install of metamask, open popup
2. Verify that the product tour popover starts by displaying 1/3
3. run tests with `yarn jest
ui/components/multichain/product-tour-popover/product-tour-popover.test.js`
4. Verify new test passes 'should render correct steps' or fails under
the right circumstances

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

<!-- [screenshots/recordings] -->
<img width="353" alt="image"
src="https://github.com/MetaMask/metamask-extension/assets/10986371/dfd8e9d8-a8db-4426-aea9-5208fa2a24d7">


## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained what problem this PR is solving and how it
is solved.
- [ ] I've linked related issues
- [ ] I've included manual testing steps
- [ ] I've included screenshots/recordings if applicable
- [ ] 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.
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **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.
---
 .../product-tour-popover/product-tour-popover.js     |  3 ++-
 .../product-tour-popover.test.js                     | 12 ++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/ui/components/multichain/product-tour-popover/product-tour-popover.js b/ui/components/multichain/product-tour-popover/product-tour-popover.js
index 411821a4da08..eaf5fa73a13b 100644
--- a/ui/components/multichain/product-tour-popover/product-tour-popover.js
+++ b/ui/components/multichain/product-tour-popover/product-tour-popover.js
@@ -110,9 +110,10 @@ export const ProductTour = ({
             paddingTop={2}
             color={TextColor.infoInverse}
             variant={TextVariant.bodyMd}
+            data-testid="multichain-product-tour-menu-popover-step-counter"
           >
             {currentStep && totalSteps
-              ? { currentStep } / { totalSteps }
+              ? `${currentStep} / ${totalSteps}`
               : null}
           </Text>
           <ButtonBase
diff --git a/ui/components/multichain/product-tour-popover/product-tour-popover.test.js b/ui/components/multichain/product-tour-popover/product-tour-popover.test.js
index 4060db554f0c..98a9f67e89a0 100644
--- a/ui/components/multichain/product-tour-popover/product-tour-popover.test.js
+++ b/ui/components/multichain/product-tour-popover/product-tour-popover.test.js
@@ -28,4 +28,16 @@ describe('DetectedTokensBanner', () => {
     );
     expect(prevIcon).toBeInTheDocument();
   });
+  it('should render correct steps', () => {
+    const { getByText } = render(
+      <ProductTour
+        anchorElement={document.body}
+        {...props}
+        prevIcon
+        currentStep={2}
+        totalSteps={5}
+      />,
+    );
+    expect(getByText('2 / 5')).toBeInTheDocument();
+  });
 });