Merge branch 'main' into jc/WAPI-1348

Author: ffmcgee725

app/components/UI/AssetOverview/ChartNavigationButton/ChartNavigationButton.styles.tsx

@@ -12,21 +12,22 @@ const styleSheet = (params: {
     vars: { selected },
   } = params;
   const { colors } = theme;
+  const finalBackgroundColor = selected
+    ? colors.background.muted
+    : 'transparent';
+  /** Matches {@link TimeRangeSelector} segment Pressables: `py-1`, `px-4`, `rounded-lg`, `flex-1`, `bg-muted` when selected. */
   return StyleSheet.create({
     button: {
-      backgroundColor: selected
-        ? colors.background.pressed
-        : colors.background.default,
-      borderRadius: 40,
-      paddingVertical: 2,
-      paddingHorizontal: 8,
-      // compensates for letter spacing
-      paddingLeft: 10,
+      flex: 1,
+      minWidth: 0,
       alignItems: 'center',
       justifyContent: 'center',
+      backgroundColor: finalBackgroundColor,
+      borderRadius: 8,
+      paddingVertical: 4,
+      paddingHorizontal: 16,
     },
     label: {
-      letterSpacing: 3,
       textAlign: 'center',
     } as TextStyle,
   });

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

@@ -370,7 +370,7 @@ const PriceAdvanced = ({
           ) : null}
         </Text>
       </View>
-      <Box twClassName="mt-3">
+      <Box twClassName="mt-3 w-full overflow-hidden">
         {crosshairData && chartType === ChartType.Candles && (
           <OHLCVBar data={crosshairData} currency={currentCurrency} />
         )}

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

@@ -173,7 +173,7 @@ const PriceLegacy = ({
           )}
         </Text>
       </View>
-      <Box twClassName={'mt-3'}>
+      <Box twClassName="mt-3 w-full overflow-hidden">
         <PriceChart
           prices={distributedPriceData}
           priceDiff={priceDiff}
@@ -182,17 +182,21 @@ const PriceLegacy = ({
         />
       </Box>
       {chartNavigationButtons.length > 0 && onTimePeriodChange && (
-        <View style={styles.chartNavigationWrapper}>
-          {chartNavigationButtons.map((label) => (
-            <ChartNavigationButton
-              key={label}
-              label={strings(
-                `asset_overview.chart_time_period_navigation.${label}`,
-              )}
-              onPress={() => onTimePeriodChange(label)}
-              selected={timePeriod === label}
-            />
-          ))}
+        <View style={styles.timeRangeContainer}>
+          <Box twClassName="w-full px-4">
+            <View style={styles.chartNavigationWrapper}>
+              {chartNavigationButtons.map((label) => (
+                <ChartNavigationButton
+                  key={label}
+                  label={strings(
+                    `asset_overview.chart_time_period_navigation.${label}`,
+                  )}
+                  onPress={() => onTimePeriodChange(label)}
+                  selected={timePeriod === label}
+                />
+              ))}
+            </View>
+          </Box>
         </View>
       )}
     </>

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

@@ -1,9 +1,9 @@
 import type { Theme } from '@metamask/design-tokens';
 import { StyleSheet, ViewStyle } from 'react-native';
+import { TOKEN_OVERVIEW_TIME_RANGE_ROW_HEIGHT } from './tokenOverviewChart.constants';
 
-const styleSheet = (params: { theme: Theme }) => {
-  const { theme } = params;
-  return StyleSheet.create({
+const styleSheet = (_params: { theme: Theme }) =>
+  StyleSheet.create({
     wrapper: {
       width: '100%',
       paddingHorizontal: 16,
@@ -49,15 +49,19 @@ const styleSheet = (params: { theme: Theme }) => {
       alignItems: 'center',
       zIndex: 2,
     } as ViewStyle,
+    /**
+     * Segment row for legacy chart periods; matches {@link TimeRangeSelector} segment padding (`py-1` / `px-4`).
+     * Vertical spacing chart→selector and selector→actions comes from the parent `timeRangeContainer`
+     * (same as `Price.advanced`).
+     */
     chartNavigationWrapper: {
       display: 'flex',
       flexDirection: 'row',
-      justifyContent: 'space-around',
-      paddingHorizontal: 10,
-      paddingTop: 20,
-      marginBottom: 16,
+      alignItems: 'center',
+      width: '100%',
+      borderRadius: 8,
+      minHeight: TOKEN_OVERVIEW_TIME_RANGE_ROW_HEIGHT,
     } as ViewStyle,
   });
-};
 
 export default styleSheet;

app/components/UI/AssetOverview/Price/tokenOverviewChart.constants.ts

@@ -9,3 +9,10 @@ export const TOKEN_OVERVIEW_CHART_HEIGHT =
 
 /** Minimum distributed price points to draw the legacy line chart (matches advanced fallback). */
 export const CHART_DATA_THRESHOLD = 5;
+
+/**
+ * Min height for the token overview time-range row (advanced selector + legacy period nav).
+ * Matches TimeRangeSelector skeleton height so swapping loading/loaded does not shift content
+ * below (e.g. Receive/More).
+ */
+export const TOKEN_OVERVIEW_TIME_RANGE_ROW_HEIGHT = 34;

app/components/UI/AssetOverview/PriceChart/PriceChart.styles.tsx

@@ -20,9 +20,23 @@ const styleSheet = (params: {
       alignSelf: 'stretch',
       overflow: 'visible',
     },
+    /** Touch + overlay host; `AreaChart` stays full-size while overlays are absolutely positioned. */
+    chartAreaWrapper: {
+      flex: 1,
+      position: 'relative',
+    },
     chartArea: {
       flex: 1,
     },
+    /** Same pattern as AdvancedChart: overlay does not participate in flex layout with AreaChart. */
+    loadingOverlayContainer: {
+      ...StyleSheet.absoluteFillObject,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    noDataOverlayContainer: {
+      ...StyleSheet.absoluteFillObject,
+    },
     chartLoading: {
       width: '100%',
       alignSelf: 'stretch',

app/components/UI/AssetOverview/PriceChart/PriceChart.tsx

@@ -363,7 +363,7 @@ const PriceChart = ({
       }}
     >
       <View
-        style={styles.chartArea}
+        style={styles.chartAreaWrapper}
         testID={chartHasData ? 'price-chart-area' : undefined}
         {...panResponder.current.panHandlers}
       >
@@ -386,12 +386,12 @@ const PriceChart = ({
           {chartHasData && !isLoading ? <EndDot /> : null}
         </AreaChart>
         {isLoading && (
-          <View>
+          <View style={styles.loadingOverlayContainer}>
             <LoadingOverlay />
           </View>
         )}
         {!isLoading && !chartHasData && (
-          <View>
+          <View style={styles.noDataOverlayContainer} pointerEvents="box-none">
             <NoDataOverlay
               chartHeight={chartHeight}
               chartPlaceholderFill={theme.colors.border.muted}