From bdc819ae9aa954e625b48e8c6fdb7a871e894379 Mon Sep 17 00:00:00 2001
From: Jony Bursztyn <jony.bursztyn@consensys.net>
Date: Wed, 4 Sep 2024 17:11:59 +0100
Subject: [PATCH] fix: move porfolio button next to price amount (#26867)
 (#26897)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

Cherry picks: https://github.com/MetaMask/metamask-extension/pull/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: https://github.com/MetaMask/MetaMask-planning/issues/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.
---
 .../app/wallet-overview/coin-buttons.tsx      | 32 ++++++------
 .../app/wallet-overview/coin-overview.tsx     | 51 +++++++++++--------
 ui/components/app/wallet-overview/index.scss  |  6 +++
 .../__snapshots__/asset-page.test.tsx.snap    | 24 ++++-----
 4 files changed, 63 insertions(+), 50 deletions(-)

diff --git a/ui/components/app/wallet-overview/coin-buttons.tsx b/ui/components/app/wallet-overview/coin-buttons.tsx
index 1bd24c23ecdb..73b0679b49a7 100644
--- 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
index 547ef107b05d..1a5e408bcac5 100644
--- 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
index cdeabdd18bdd..bbbf57075c24 100644
--- 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
index 6bdd3d16c128..10c36fe31236 100644
--- 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