fix: Improve Perps Chart panning navigation (MetaMask#19345)

## **Description**

It was reported that on low-end Android devices, that there was a
performance jitteriness with the PerpsChart. This PR aims to address
those issues by adding custom configurations for Android, and tweaking
the sensitivity of the pan gesture handlers.

Additionally, this PR addresses a few other chart related bugs:

1. Yaxis values not showing up for Pers with very small values (like
PUMP)
2. Xaxis values not being localized to user's timezone
3. "More" should be selected when a period within the more menu is
selected
4. Adds skeleton loader
5. Fix for current price line showing the price of the last visible
candle, rather than the current candle price

This PR also introduces the `OHLClegend` component which displays the
OHLC data for each candle when longpressing/dragging over the candles.
When switching candles in this mode, haptics should be executed.

You can double tap the chart to exit out of this mode. You can also pull
down to refresh the chart to it's default period/zoom of 3min/45
candles.

## **Changelog**

CHANGELOG entry: Adds configurations and fixes for candlestick chart UX

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: Candlestick chart navigationPerps

  Scenario: user wants to navigate the chart
    Given they are on the perps details view

    When user pans, they navigate the time series
    When user pinches, they zoom in and out of the time series
    When a user long presses and drags, they enter into OHLC candle mode, where they see the values of each candle
```

## **Screenshots/Recordings**

High End Android - Samsung Galaxy S23 Ultra

https://github.com/user-attachments/assets/d465c9e1-3fc8-462b-a130-14e80f93d299

Low end Android - Pixel 3a


https://github.com/user-attachments/assets/02d0a827-17dc-40ed-aca0-633edb42c453

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

Author: gambinish

app/components/UI/Perps/components/PerpsCandlePeriodSelector/PerpsCandlePeriodSelector.styles.ts

@@ -0,0 +1,72 @@
+import { Theme } from '../../../../../util/theme/models';
+import { StyleSheet } from 'react-native';
+
+export const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '100%',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      gap: 4,
+    },
+    periodButton: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      borderRadius: 8,
+      marginHorizontal: 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    periodButtonSelected: {
+      backgroundColor: theme.colors.background.muted,
+    },
+    periodButtonUnselected: {
+      backgroundColor: theme.colors.background.default,
+    },
+    periodButtonPressed: {
+      opacity: 0.7,
+    },
+    periodText: {
+      fontSize: 14,
+      fontWeight: '400',
+    },
+    periodTextSelected: {
+      color: theme.colors.text.default,
+    },
+    periodTextUnselected: {
+      color: theme.colors.text.muted,
+    },
+    moreButton: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      borderRadius: 8,
+      marginHorizontal: 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    moreButtonSelected: {
+      backgroundColor: theme.colors.background.muted,
+    },
+    moreButtonUnselected: {
+      backgroundColor: theme.colors.background.default,
+    },
+    moreButtonPressed: {
+      opacity: 0.7,
+    },
+    moreText: {
+      fontSize: 14,
+      fontWeight: '400',
+    },
+    moreTextSelected: {
+      color: theme.colors.text.default,
+    },
+    moreTextUnselected: {
+      color: theme.colors.text.muted,
+    },
+  });
+};

app/components/UI/Perps/components/PerpsCandlePeriodSelector/PerpsCandlePeriodSelector.tsx

@@ -1,17 +1,11 @@
 import React from 'react';
 import { Pressable } from 'react-native';
-import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import {
-  Box,
-  Text,
-  TextVariant,
-  BoxFlexDirection,
-  BoxAlignItems,
-  BoxJustifyContent,
-} from '@metamask/design-system-react-native';
+import { Box, Text, TextVariant } from '@metamask/design-system-react-native';
+import { useStyles } from '../../../../../component-library/hooks';
 import { strings } from '../../../../../../locales/i18n';
 import { CandlePeriod } from '../../constants/chartConfig';
 import { getPerpsCandlePeriodSelector } from '../../../../../../e2e/selectors/Perps/Perps.selectors';
+import { styleSheet } from './PerpsCandlePeriodSelector.styles';
 
 // Default candle periods with preset values
 const DEFAULT_CANDLE_PERIODS = [
@@ -34,16 +28,15 @@ const PerpsCandlePeriodSelector: React.FC<PerpsCandlePeriodSelectorProps> = ({
   onMorePress,
   testID,
 }) => {
-  const tw = useTailwind();
+  const { styles } = useStyles(styleSheet, {});
+
+  // Check if the selected period is in the "More" category (not in default periods)
+  const isMorePeriodSelected = !DEFAULT_CANDLE_PERIODS.some(
+    (period) => period.value.toLowerCase() === selectedPeriod.toLowerCase(),
+  );
 
   return (
-    <Box
-      flexDirection={BoxFlexDirection.Row}
-      alignItems={BoxAlignItems.Center}
-      justifyContent={BoxJustifyContent.Center}
-      twClassName="w-full py-3 px-4 gap-1"
-      testID={testID}
-    >
+    <Box style={styles.container} testID={testID}>
       {/* Candle Period Buttons */}
       {DEFAULT_CANDLE_PERIODS.map((period) => {
         const isSelected =
@@ -52,14 +45,13 @@ const PerpsCandlePeriodSelector: React.FC<PerpsCandlePeriodSelectorProps> = ({
         return (
           <Pressable
             key={period.value}
-            style={({ pressed }) =>
-              tw.style(
-                'px-3 py-1.5 rounded-lg mx-0.5 items-center justify-center',
-                isSelected && 'bg-background-muted',
-                !isSelected && 'bg-background-default',
-                pressed && 'opacity-70',
-              )
-            }
+            style={({ pressed }) => [
+              styles.periodButton,
+              isSelected
+                ? styles.periodButtonSelected
+                : styles.periodButtonUnselected,
+              pressed && styles.periodButtonPressed,
+            ]}
             onPress={() => onPeriodChange?.(period.value)}
             testID={
               testID
@@ -72,7 +64,12 @@ const PerpsCandlePeriodSelector: React.FC<PerpsCandlePeriodSelectorProps> = ({
           >
             <Text
               variant={TextVariant.BodySm}
-              twClassName={isSelected ? 'text-text-default' : 'text-text-muted'}
+              style={[
+                styles.periodText,
+                isSelected
+                  ? styles.periodTextSelected
+                  : styles.periodTextUnselected,
+              ]}
             >
               {period.label}
             </Text>
@@ -82,18 +79,27 @@ const PerpsCandlePeriodSelector: React.FC<PerpsCandlePeriodSelectorProps> = ({
 
       {/* More Button */}
       <Pressable
-        style={({ pressed }) =>
-          tw.style(
-            'px-3 py-1.5 rounded-lg mx-0.5 items-center justify-center bg-background-default',
-            pressed && 'opacity-70',
-          )
-        }
+        style={({ pressed }) => [
+          styles.moreButton,
+          isMorePeriodSelected
+            ? styles.moreButtonSelected
+            : styles.moreButtonUnselected,
+          pressed && styles.moreButtonPressed,
+        ]}
         onPress={onMorePress}
         testID={
           testID ? getPerpsCandlePeriodSelector.moreButton(testID) : undefined
         }
       >
-        <Text variant={TextVariant.BodySm} twClassName="text-text-muted">
+        <Text
+          variant={TextVariant.BodySm}
+          style={[
+            styles.moreText,
+            isMorePeriodSelected
+              ? styles.moreTextSelected
+              : styles.moreTextUnselected,
+          ]}
+        >
           {strings('perps.chart.candle_period_selector.show_more')}
         </Text>
       </Pressable>