fix: move porfolio button next to price amount (#26867) (#26897)

Cherry picks: #26867 into V12.5.0 ## **Description** Moves the portfolio button so that it's next to the token price amount. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26867?quickstart=1) ## **Related issues** Fixes: MetaMask/MetaMask-planning#3201 ## **Manual testing steps** 1. Go to the portfolio page 2. Check that the Portfolio button is present next to the price amount of token 3. Click it to test it works fine ## **Screenshots/Recordings** <img width="324" alt="Screenshot 2024-09-03 at 22 57 32" src="https://github.com/user-attachments/assets/ab9a9818-d9d1-438e-9b66-1335c4e8c1c6"> <img width="331" alt="Screenshot 2024-09-03 at 22 58 54" src="https://github.com/user-attachments/assets/f260799c-9e22-40dd-8fb8-1d26d3c011ed"> ### **Before** <img width="348" alt="Screenshot 2024-09-03 at 15 46 36" src="https://github.com/user-attachments/assets/ca261c96-dd93-4699-8e51-d73cf5823cb2"> ### **After** <img width="331" alt="Screenshot 2024-09-03 at 22 58 54" src="https://github.com/user-attachments/assets/f260799c-9e22-40dd-8fb8-1d26d3c011ed"> ## **Pre-merge author checklist** - [X] 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). - [X] 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 - [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.
MetaMask · Sep 19, 2024 · bdc819a · bdc819a
1 parent cc8d487
commit bdc819a
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 50 deletions.
diff --git a/ui/components/app/wallet-overview/coin-buttons.tsx b/ui/components/app/wallet-overview/coin-buttons.tsx
@@ -326,22 +326,6 @@ const CoinButtons = ({
         ///: END:ONLY_INCLUDE_IF
       }
 
-      <IconButton
-        className={`${classPrefix}-overview__button`}
-        data-testid={`${classPrefix}-overview-send`}
-        Icon={
-          <Icon
-            name={IconName.Arrow2UpRight}
-            color={IconColor.primaryInverse}
-          />
-        }
-        disabled={!isSigningEnabled}
-        label={t('send')}
-        onClick={handleSendOnClick}
-        tooltipRender={(contents: React.ReactElement) =>
-          generateTooltip('sendButton', contents)
-        }
-      />
       <IconButton
         className={`${classPrefix}-overview__button`}
         disabled={
@@ -377,6 +361,22 @@ const CoinButtons = ({
         />
         ///: END:ONLY_INCLUDE_IF
       }
+      <IconButton
+        className={`${classPrefix}-overview__button`}
+        data-testid={`${classPrefix}-overview-send`}
+        Icon={
+          <Icon
+            name={IconName.Arrow2UpRight}
+            color={IconColor.primaryInverse}
+          />
+        }
+        disabled={!isSigningEnabled}
+        label={t('send')}
+        onClick={handleSendOnClick}
+        tooltipRender={(contents: React.ReactElement) =>
+          generateTooltip('sendButton', contents)
+        }
+      />
       {
         <>
           {showReceiveModal && (

diff --git a/ui/components/app/wallet-overview/coin-overview.tsx b/ui/components/app/wallet-overview/coin-overview.tsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { zeroAddress } from 'ethereumjs-util';
 import { CaipChainId } from '@metamask/utils';
 import type { Hex } from '@metamask/utils';
-import { Icon, IconName } from '../../component-library';
+import { Icon, IconName, IconSize } from '../../component-library';
 import { IconColor } from '../../../helpers/constants/design-system';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
@@ -122,14 +122,6 @@ export const CoinOverview = ({
           disabled={!balanceIsCached}
         >
           <div className={`${classPrefix}-overview__balance`}>
-            <div
-              onClick={handlePortfolioOnClick}
-              className="wallet-overview__portfolio_button"
-              data-testid="portfolio-link"
-            >
-              {t('portfolio')}
-              <Icon name={IconName.Diagram} color={IconColor.primaryDefault} />
-            </div>
             <div className={`${classPrefix}-overview__primary-container`}>
               {balance ? (
                 <UserPreferencedCurrencyDisplay
@@ -163,19 +155,34 @@ export const CoinOverview = ({
                 </span>
               )}
             </div>
-            {showFiat && isOriginalNativeSymbol && balance && (
-              <UserPreferencedCurrencyDisplay
-                className={classnames({
-                  [`${classPrefix}__cached-secondary-balance`]: balanceIsCached,
-                  [`${classPrefix}__secondary-balance`]: !balanceIsCached,
-                })}
-                data-testid={`${classPrefix}-overview__secondary-currency`}
-                value={balance}
-                type={SECONDARY}
-                ethNumberOfDecimals={4}
-                hideTitle
-              />
-            )}
+            <div className="wallet-overview__currency-wrapper">
+              {showFiat && isOriginalNativeSymbol && balance && (
+                <UserPreferencedCurrencyDisplay
+                  className={classnames({
+                    [`${classPrefix}__cached-secondary-balance`]:
+                      balanceIsCached,
+                    [`${classPrefix}__secondary-balance`]: !balanceIsCached,
+                  })}
+                  data-testid={`${classPrefix}-overview__secondary-currency`}
+                  value={balance}
+                  type={SECONDARY}
+                  ethNumberOfDecimals={4}
+                  hideTitle
+                />
+              )}
+              <div
+                onClick={handlePortfolioOnClick}
+                className="wallet-overview__portfolio_button"
+                data-testid="portfolio-link"
+              >
+                {t('portfolio')}
+                <Icon
+                  size={IconSize.Sm}
+                  name={IconName.Export}
+                  color={IconColor.primaryDefault}
+                />
+              </div>
+            </div>
             {isEvm && (
               <PercentageAndAmountChange
                 value={tokensMarketData?.[zeroAddress()]?.pricePercentChange1d}

diff --git a/ui/components/app/wallet-overview/index.scss b/ui/components/app/wallet-overview/index.scss
@@ -35,6 +35,12 @@
     align-items: center;
     color: var(--color-primary-default);
   }
+
+  &__currency-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+  }
 }
 
 %asset-buttons {

diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
@@ -87,58 +87,58 @@ exports[`AssetPage should render a native asset 1`] = `
           </p>
         </button>
         <button
-          class="icon-button coin-overview__button"
-          data-testid="coin-overview-send"
+          class="icon-button coin-overview__button icon-button--disabled"
+          data-testid="token-overview-button-swap"
+          disabled=""
         >
           <div
             class="icon-button__circle"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
-              style="mask-image: url('./images/icons/arrow-2-up-right.svg');"
+              style="mask-image: url('./images/icons/swap-horizontal.svg');"
             />
           </div>
           <p
             class="mm-box mm-text icon-button__label mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
           >
-            Send
+            Swap
           </p>
         </button>
         <button
-          class="icon-button coin-overview__button icon-button--disabled"
-          data-testid="token-overview-button-swap"
-          disabled=""
+          class="icon-button coin-overview__button"
+          data-testid="coin-overview-bridge"
         >
           <div
             class="icon-button__circle"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
-              style="mask-image: url('./images/icons/swap-horizontal.svg');"
+              style="mask-image: url('./images/icons/bridge.svg');"
             />
           </div>
           <p
             class="mm-box mm-text icon-button__label mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
           >
-            Swap
+            Bridge
           </p>
         </button>
         <button
           class="icon-button coin-overview__button"
-          data-testid="coin-overview-bridge"
+          data-testid="coin-overview-send"
         >
           <div
             class="icon-button__circle"
           >
             <span
               class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
-              style="mask-image: url('./images/icons/bridge.svg');"
+              style="mask-image: url('./images/icons/arrow-2-up-right.svg');"
             />
           </div>
           <p
             class="mm-box mm-text icon-button__label mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
           >
-            Bridge
+            Send
           </p>
         </button>
         <button