From 4fd3757964ac1f62fdefccb7f583b2aebdd334b0 Mon Sep 17 00:00:00 2001
From: Victor Thomas <10986371+vthomas13@users.noreply.github.com>
Date: Wed, 17 Jan 2024 17:54:50 -0500
Subject: [PATCH 1/2] wip rounding tokens to 5 decimals maximum

---
 ui/components/app/asset-list/asset-list.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js
index 63e11b77d40c..49297b9745b6 100644
--- a/ui/components/app/asset-list/asset-list.js
+++ b/ui/components/app/asset-list/asset-list.js
@@ -49,6 +49,7 @@ import {
   showPrimaryCurrency,
   showSecondaryCurrency,
 } from '../../../../shared/modules/currency-display.utils';
+import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../helpers/utils/util';
 
 const AssetList = ({ onClickAsset }) => {
   const [showDetectedTokens, setShowDetectedTokens] = useState(false);
@@ -105,7 +106,10 @@ const AssetList = ({ onClickAsset }) => {
 
   const { tokensWithBalances, totalFiatBalance, totalWeiBalance, loading } =
     useAccountTotalFiatBalance(selectedAddress, shouldHideZeroBalanceTokens);
-
+  const roundedTokensWithBalances = tokensWithBalances.forEach((token) => {
+    // token.string is the balance displayed in the TokenList UI
+    token.string = roundToDecimalPlacesRemovingExtraZeroes(token.string, 5);
+  });
   const balanceIsZero = Number(totalFiatBalance) === 0;
   const isBuyableChain = useSelector(getIsBuyableChain);
   const shouldShowBuy = isBuyableChain && balanceIsZero;
@@ -205,7 +209,7 @@ const AssetList = ({ onClickAsset }) => {
         isStakeable={isStakeable}
       />
       <TokenList
-        tokens={tokensWithBalances}
+        tokens={roundedTokensWithBalances}
         loading={loading}
         onTokenClick={(tokenAddress) => {
           onClickAsset(tokenAddress);

From 0e98a71f8009598a6cd0251ae871553ba370365b Mon Sep 17 00:00:00 2001
From: Victor Thomas <10986371+vthomas13@users.noreply.github.com>
Date: Thu, 18 Jan 2024 14:41:31 -0500
Subject: [PATCH 2/2] moving native token balance

---
 ui/components/app/asset-list/asset-list.js    |  4 +-
 .../__snapshots__/token-cell.test.js.snap     | 37 ++++++++++++----
 .../app/token-cell/token-cell.test.js         |  4 +-
 .../token-list-item.test.js.snap              | 31 ++++++++++---
 .../token-list-item/token-list-item.js        | 44 +++++++++++++++----
 5 files changed, 91 insertions(+), 29 deletions(-)

diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js
index 49297b9745b6..c6575d1e6a1f 100644
--- a/ui/components/app/asset-list/asset-list.js
+++ b/ui/components/app/asset-list/asset-list.js
@@ -106,7 +106,7 @@ const AssetList = ({ onClickAsset }) => {
 
   const { tokensWithBalances, totalFiatBalance, totalWeiBalance, loading } =
     useAccountTotalFiatBalance(selectedAddress, shouldHideZeroBalanceTokens);
-  const roundedTokensWithBalances = tokensWithBalances.forEach((token) => {
+  tokensWithBalances.forEach((token) => {
     // token.string is the balance displayed in the TokenList UI
     token.string = roundToDecimalPlacesRemovingExtraZeroes(token.string, 5);
   });
@@ -209,7 +209,7 @@ const AssetList = ({ onClickAsset }) => {
         isStakeable={isStakeable}
       />
       <TokenList
-        tokens={roundedTokensWithBalances}
+        tokens={tokensWithBalances}
         loading={loading}
         onTokenClick={(tokenAddress) => {
           onClickAsset(tokenAddress);
diff --git a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
index 1767fab5562a..ebf7e4a58ccf 100644
--- a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
+++ b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
@@ -43,7 +43,7 @@ exports[`Token Cell should match snapshot 1`] = `
         style="flex-grow: 1; overflow: hidden;"
       >
         <div
-          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--justify-content-space-between"
+          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
         >
           <div
             class="mm-box mm-box--display-inline-block mm-box--width-1/3"
@@ -61,15 +61,34 @@ exports[`Token Cell should match snapshot 1`] = `
             5.00
           </p>
         </div>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
-          data-testid="multichain-token-list-item-value"
+        <div
+          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
         >
-          5.000
-           
-          TEST
-           
-        </p>
+          <div
+            class="mm-box mm-box--width-1/3"
+          >
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-alternative"
+              data-testid="multichain-token-list-item-token-name"
+            >
+              TEST
+            </p>
+          </div>
+          <div
+            class="mm-box mm-box--width-2/3"
+            style="overflow: hidden;"
+          >
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--color-text-alternative"
+              data-testid="multichain-token-list-item-value"
+            >
+              5.000
+               
+              TEST
+               
+            </p>
+          </div>
+        </div>
       </div>
     </a>
   </div>
diff --git a/ui/components/app/token-cell/token-cell.test.js b/ui/components/app/token-cell/token-cell.test.js
index 0988ab5d305c..f3ccd03fb27d 100644
--- a/ui/components/app/token-cell/token-cell.test.js
+++ b/ui/components/app/token-cell/token-cell.test.js
@@ -109,14 +109,14 @@ describe('Token Cell', () => {
   });
 
   it('should render the correct token and filter by symbol and address', () => {
-    const { queryByText, getByAltText } = renderWithProvider(
+    const { getByTestId, getByAltText } = renderWithProvider(
       <TokenCell {...props} />,
       mockStore,
     );
 
     const image = getByAltText('TEST logo');
 
-    expect(queryByText('TEST')).toBeInTheDocument();
+    expect(getByTestId('multichain-token-list-item-value')).toBeInTheDocument();
     expect(image).toBeInTheDocument();
     expect(image).toHaveAttribute('src', './images/test_image.svg');
   });
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
index 4ab0d2a4ffdd..df718b429400 100644
--- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
+++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
@@ -38,7 +38,7 @@ exports[`TokenListItem should render correctly 1`] = `
         style="flex-grow: 1; overflow: hidden;"
       >
         <div
-          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--justify-content-space-between"
+          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
         >
           <div
             class="mm-box mm-box--display-inline-block mm-box--width-1/3"
@@ -52,13 +52,30 @@ exports[`TokenListItem should render correctly 1`] = `
             data-testid="multichain-token-list-item-secondary-value"
           />
         </div>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
-          data-testid="multichain-token-list-item-value"
+        <div
+          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
         >
-           
-           
-        </p>
+          <div
+            class="mm-box mm-box--width-1/3"
+          >
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-alternative"
+              data-testid="multichain-token-list-item-token-name"
+            />
+          </div>
+          <div
+            class="mm-box mm-box--width-2/3"
+            style="overflow: hidden;"
+          >
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--color-text-alternative"
+              data-testid="multichain-token-list-item-value"
+            >
+               
+               
+            </p>
+          </div>
+        </div>
       </div>
     </a>
   </div>
diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
index 669d4f704619..74a3125dba8b 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.js
@@ -200,6 +200,7 @@ export const TokenListItem = ({
         >
           <Box
             display={Display.Flex}
+            flexDirection={FlexDirection.Row}
             justifyContent={JustifyContent.spaceBetween}
             gap={1}
           >
@@ -222,10 +223,10 @@ export const TokenListItem = ({
                   >
                     {isStakeable ? (
                       <>
-                        {tokenTitle} {stakeableTitle}
+                        {tokenSymbol} {stakeableTitle}
                       </>
                     ) : (
-                      tokenTitle
+                      tokenSymbol
                     )}
                   </Text>
                 </Tooltip>
@@ -238,10 +239,10 @@ export const TokenListItem = ({
                 >
                   {isStakeable ? (
                     <Box display={Display.InlineBlock}>
-                      {tokenTitle} {stakeableTitle}
+                      {tokenSymbol} {stakeableTitle}
                     </Box>
                   ) : (
-                    tokenTitle
+                    tokenSymbol
                   )}
                 </Text>
               )}
@@ -271,12 +272,37 @@ export const TokenListItem = ({
               </Text>
             )}
           </Box>
-          <Text
-            color={TextColor.textAlternative}
-            data-testid="multichain-token-list-item-value"
+          <Box
+            display={Display.Flex}
+            flexDirection={FlexDirection.Row}
+            justifyContent={JustifyContent.spaceBetween}
+            gap={1}
           >
-            {primary} {tokenSymbol}{' '}
-          </Text>
+            <Box width={BlockSize.OneThird}>
+              {/* bottom left */}
+              <Text
+                fontWeight={FontWeight.Medium}
+                variant={TextVariant.bodyMd}
+                color={TextColor.textAlternative}
+                data-testid="multichain-token-list-item-token-name" //
+                ellipsis
+              >
+                {tokenTitle}
+              </Text>
+            </Box>
+            <Box style={{ overflow: 'hidden' }} width={BlockSize.TwoThirds}>
+              {/* bottom right */}
+              <Text
+                data-testid="multichain-token-list-item-value"
+                color={TextColor.textAlternative}
+                fontWeight={FontWeight.Medium}
+                variant={TextVariant.bodyMd}
+                textAlign={TextAlign.End}
+              >
+                {primary} {tokenSymbol}{' '}
+              </Text>
+            </Box>
+          </Box>
         </Box>
       </Box>
       {showScamWarningModal ? (