Merge branch 'develop' into mm-security-code-scanner

MetaMask · Feb 22, 2024 · 1dbcbda · 1dbcbda
2 parents f612920 + 7fcddff
commit 1dbcbda
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 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
@@ -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
@@ -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}

diff --git 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
@@ -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();
+  });
 });