chore(runway): cherry-pick fix (cp-7.47.0): Ensure we pass the correct type when rendering the price overview (#15747)

- fix (cp-7.47.0): Ensure we pass the correct type when rendering the
price overview (#15711)

Author: runway-github[bot]

app/components/UI/AssetOverview/Price/Price.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react-native';
+import { render, userEvent } from '@testing-library/react-native';
 import Price from './Price';
 import { TokenI } from '../../Tokens/types';
 import {
@@ -8,6 +8,16 @@ import {
 } from '../../../../components/hooks/useTokenHistoricalPrices';
 import { AssetConversion } from '@metamask/snaps-sdk';
 import { CaipAssetId } from '@metamask/utils';
+import PriceChart from '../PriceChart/PriceChart';
+import Button, {
+  ButtonVariants,
+} from '../../../../component-library/components/Buttons/Button';
+
+jest.mock('../PriceChart/PriceChart', () => ({
+  ...jest.requireActual('../PriceChart/PriceChart'),
+  __esModule: true,
+  default: jest.fn().mockImplementation(() => null),
+}));
 
 const mockAsset: TokenI = {
   name: 'Ethereum',
@@ -102,4 +112,28 @@ describe('Price Component', () => {
 
     expect(getByTestId('loading-price-diff')).toBeTruthy();
   });
+
+  it('renders price at selected date', async () => {
+    jest
+      .mocked(PriceChart)
+      .mockImplementation(({ onChartIndexChange }) => (
+        <Button
+          testID="mock-price-chart"
+          variant={ButtonVariants.Primary}
+          label="TEST BUTTON"
+          onPress={() => onChartIndexChange(1)}
+        />
+      ));
+
+    const { getByTestId } = render(<Price {...{ ...mockProps }} />);
+
+    // No item selected - assert label
+    expect(getByTestId('price-label')).toHaveTextContent('Today');
+
+    // Act - click mock button to change chart index
+    await userEvent.press(getByTestId('mock-price-chart'));
+
+    // A date has been selected, show correct mock date
+    expect(getByTestId('price-label')).toHaveTextContent('Jan 13 at 4:40 am');
+  });
 });

app/components/UI/AssetOverview/Price/Price.tsx

@@ -20,7 +20,7 @@ import styleSheet from './Price.styles';
 import { TokenOverviewSelectorsIDs } from '../../../../../e2e/selectors/wallet/TokenOverview.selectors';
 import { TokenI } from '../../Tokens/types';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
-import {  CaipAssetType, } from '@metamask/utils';
+import { CaipAssetType } from '@metamask/utils';
 import { AssetConversion } from '@metamask/snaps-sdk';
 ///: END:ONLY_INCLUDE_IF
 
@@ -90,9 +90,8 @@ const Price = ({
     ? distributedPriceData[activeChartIndex]?.[1] || currentPrice
     : Number(multichainAssetRates?.rate);
 
-
   const date: string | undefined = distributedPriceData[activeChartIndex]?.[0]
-    ? toDateFormat(distributedPriceData[activeChartIndex]?.[0])
+    ? toDateFormat(Number(distributedPriceData[activeChartIndex]?.[0]))
     : timePeriodTextDict[timePeriod];
 
   const diff: number | undefined = distributedPriceData[activeChartIndex]?.[1]
@@ -165,6 +164,7 @@ const Price = ({
               {diff === 0 ? '0' : ((diff / comparePrice) * 100).toFixed(2)}
               %){' '}
               <Text
+                testID="price-label"
                 color={TextColor.Alternative}
                 variant={TextVariant.BodyMDMedium}
               >

app/components/UI/AssetOverview/__snapshots__/AssetOverview.test.tsx.snap

@@ -2478,6 +2478,7 @@ exports[`AssetOverview should render native balances when non evm network is sel
                 "lineHeight": 24,
               }
             }
+            testID="price-label"
           >
             Today
           </Text>

app/util/date/index.js

@@ -8,6 +8,11 @@ export function toLocaleDateTime(timestamp) {
   return `${date} ${time}`;
 }
 
+/**
+ * Formats a given timestamp (number | Date)
+ * @param {number | Date} timestamp
+ * @returns string
+ */
 export function toDateFormat(timestamp) {
   const date = new Date(timestamp);
   const month = strings(`date.months.${date.getMonth()}`);