fix(homepage): add dot separator between price and variation for token rows (TMCU-569) (#27449)

<!--
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.
-->

## **Description**

This PR adds a dot separator (•) between the price and variation text in
token rows on the homepage, aligning with the `price • variation` format
used in `TokenListItemV2`.

**1. What is the reason for the change?**
- Token rows in the Cash section and Popular Tokens section did not
follow the same layout as token list items
- `TokenListItemV2` displays price and variation as `$1.00 • +5.25%` (or
similar)
- The MUSD row in Cash and the Popular Token rows were missing this
separator

**2. What is the improvement/solution?**
- Insert the Unicode bullet (`\u2022`) between the price and variation
- Update `PopularTokenRow` so price and percentage display as `price •
variation`
- Update `CashGetMusdEmptyState` for the MUSD empty state
- Adjust test assertions in `PopularTokenRow.test.tsx` to match the new
format

## **Changelog**

CHANGELOG entry: Fixed token row display on homepage to show price and
variation separated by a dot for consistency with token list items

## **Related issues**

Fixes:
[TMCU-569](https://consensyssoftware.atlassian.net/browse/TMCU-569)

## **Manual testing steps**

```gherkin
Feature: Homepage token row display consistency

  Scenario: user views token rows with price and variation
    Given the user is on the Homepage
    And the Cash section shows MUSD or Popular Tokens shows tokens with price/variation
    When the user views the token row
    Then price and variation are separated by a dot (•)
    And the layout matches TokenListItemV2 (e.g. "$1.00 • 3% bonus" or "$1,234.56 • +5.25%")
```

## **Screenshots/Recordings**

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

### **Before**

<img width="300"
src="https://github.com/user-attachments/assets/b81022c5-6d85-4f86-9b74-f246503b8475"
/>


### **After**

<img width="300"
src="https://github.com/user-attachments/assets/03c27fe4-07d0-49fa-947f-3fa1ca12efaa"
/>


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] 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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk UI-only change to text/layout formatting plus corresponding
test updates; no data, auth, or navigation logic changes.
> 
> **Overview**
> Aligns homepage token rows with the `price • variation` display by
inserting a Unicode bullet separator between the price and
percentage/bonus text.
> 
> Updates `PopularTokenRow` to render the separator *only when* a
percentage value is present (and simplifies the layout), and tweaks
`CashGetMusdEmptyState` to show the same separator for the mUSD row.
Tests are updated to assert the new formatting and ensure no trailing
bullet appears when variation is absent/invalid.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
dcda7cd. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: wachunei

app/components/Views/Homepage/Sections/Cash/CashGetMusdEmptyState.tsx

@@ -201,12 +201,12 @@ const CashGetMusdEmptyState = () => {
             >
               {MUSD_TOKEN.name}
             </Text>
-            <Box twClassName="flex-row gap-2">
+            <Box twClassName="flex-row gap-1">
               <Text
                 variant={TextVariant.BodySm}
                 color={TextColor.TextAlternative}
               >
-                {musdPriceFormatted}
+                {musdPriceFormatted} {'\u2022'}
               </Text>
               <Text
                 variant={TextVariant.BodySm}

app/components/Views/Homepage/Sections/Tokens/components/PopularTokenRow.test.tsx

@@ -83,16 +83,17 @@ describe('PopularTokenRow', () => {
 
       renderWithProvider(<PopularTokenRow token={token} />);
 
-      // Price should be formatted with currency symbol
-      expect(screen.getByText('$1,234.56')).toBeOnTheScreen();
+      // Price is rendered with dot separator when percentage exists (e.g. "$1,234.56 • +5.25%")
+      expect(screen.getByText(/\$1,234\.56/)).toBeOnTheScreen();
     });
 
     it('renders dash when price is undefined', () => {
       const token = createMockToken({ price: undefined });
 
       renderWithProvider(<PopularTokenRow token={token} />);
 
-      expect(screen.getByText('—')).toBeOnTheScreen();
+      // Dash is rendered; with default percentage we get "— • +5.25%"
+      expect(screen.getByText(/—/)).toBeOnTheScreen();
     });
 
     it('renders positive percentage change with plus sign', () => {
@@ -124,8 +125,23 @@ describe('PopularTokenRow', () => {
 
       renderWithProvider(<PopularTokenRow token={token} />);
 
-      // Use regex to match any text containing a percentage value (e.g. +5.25%, -3.50%)
+      // No percentage should be shown
       expect(screen.queryByText(/[+-]?\d+\.\d+%/)).toBeNull();
+      // Price only, no trailing bullet
+      expect(screen.getByText('$100.50')).toBeOnTheScreen();
+    });
+
+    it('does not render trailing bullet when percentage change is undefined', () => {
+      const token = createMockToken({
+        price: 99.99,
+        priceChange1d: undefined,
+      });
+
+      renderWithProvider(<PopularTokenRow token={token} />);
+
+      // Price without trailing bullet (no "•" after it)
+      expect(screen.getByText('$99.99')).toBeOnTheScreen();
+      expect(screen.queryByText(/\$\d+\.\d+\s+•\s*$/)).toBeNull();
     });
 
     it('renders description instead of price when provided', () => {
@@ -138,8 +154,8 @@ describe('PopularTokenRow', () => {
       renderWithProvider(<PopularTokenRow token={token} />);
 
       expect(screen.getByText('Earn 3% bonus')).toBeOnTheScreen();
-      // Price should not be rendered when description is present
-      expect(screen.queryByText('$100.00')).not.toBeOnTheScreen();
+      // Price and percentage should not be rendered when description is present
+      expect(screen.queryByText(/\$100\.00/)).toBeNull();
     });
 
     it('renders Buy button', () => {
@@ -293,17 +309,19 @@ describe('PopularTokenRow', () => {
 
       renderWithProvider(<PopularTokenRow token={token} />);
 
-      // Should not render percentage for Infinity
-      expect(screen.queryByText('Infinity%')).not.toBeOnTheScreen();
+      // Should not render percentage for Infinity; price only, no trailing bullet
+      expect(screen.queryByText('Infinity%')).toBeNull();
+      expect(screen.getByText('$100.50')).toBeOnTheScreen();
     });
 
     it('handles NaN price change gracefully', () => {
       const token = createMockToken({ priceChange1d: NaN });
 
       renderWithProvider(<PopularTokenRow token={token} />);
 
-      // Should not render percentage for NaN
-      expect(screen.queryByText('NaN%')).not.toBeOnTheScreen();
+      // Should not render percentage for NaN; price only, no trailing bullet
+      expect(screen.queryByText('NaN%')).toBeNull();
+      expect(screen.getByText('$100.50')).toBeOnTheScreen();
     });
   });
 });

app/components/Views/Homepage/Sections/Tokens/components/PopularTokenRow.tsx

@@ -222,16 +222,15 @@ const PopularTokenRow: React.FC<PopularTokenRowProps> = ({ token }) => {
                 color={TextColor.Alternative}
               >
                 {priceDisplay}
+                {percentageChange.text ? ' \u2022 ' : ''}
               </Text>
               {percentageChange.text ? (
-                <Box twClassName="ml-2">
-                  <Text
-                    variant={TextVariant.BodySMMedium}
-                    color={percentageChange.color}
-                  >
-                    {percentageChange.text}
-                  </Text>
-                </Box>
+                <Text
+                  variant={TextVariant.BodySMMedium}
+                  color={percentageChange.color}
+                >
+                  {percentageChange.text}
+                </Text>
               ) : null}
             </Box>
           )}