Push missing changes

rainbow-me · Jan 7, 2025 · 243a5a4 · 243a5a4
1 parent 9646f49
commit 243a5a4
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 43 deletions.
diff --git a/src/components/value-chart/Chart.js b/src/components/value-chart/Chart.js
@@ -115,6 +115,7 @@ export default function ChartWrapper({
   color,
   fetchingCharts,
   isPool,
+  latestChange,
   updateChartType,
   showChart,
   testID,
@@ -175,7 +176,15 @@ export default function ChartWrapper({
 
   return (
     <Container>
-      <ChartExpandedStateHeader {...props} chartType={chartType} color={color} isPool={isPool} showChart={showChart} testID={testID} />
+      <ChartExpandedStateHeader
+        {...props}
+        chartType={chartType}
+        color={color}
+        isPool={isPool}
+        latestChange={latestChange}
+        showChart={showChart}
+        testID={testID}
+      />
       <ChartContainer showChart={showChart}>
         {showChart && (
           <>

diff --git a/src/hooks/charts/useChartDataLabels.ts b/src/hooks/charts/useChartDataLabels.ts
@@ -1,15 +1,20 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import ChartTypes, { ChartType } from '@/helpers/chartTypes';
-import { toFixedDecimals } from '@/helpers/utilities';
 import { ChartData } from './useChartInfo';
+import { useDerivedValue } from 'react-native-reanimated';
+import { toFixedWorklet } from '@/safe-math/SafeMath';
 
-const formatPercentChange = (change = 0) => toFixedDecimals(change, 2);
+const formatPercentChange = (change = 0) => {
+  'worklet';
+  return toFixedWorklet(change, 2);
+};
 
 export default function useChartDataLabels({ asset, chartType, points }: { asset: any; chartType: ChartType; points: ChartData[] }) {
   const latestPrice = asset?.price?.value;
 
   const getPercentChangeForPrice = useCallback(
     (startPrice: number) => {
+      'worklet';
       const endPrice = points[points.length - 1]?.y;
       if (!endPrice) return;
       const percent = ((endPrice - startPrice) / startPrice) * 100;
@@ -18,12 +23,10 @@ export default function useChartDataLabels({ asset, chartType, points }: { asset
     [points]
   );
 
-  const latestChange = useMemo(
-    () =>
-      !points || chartType === ChartTypes.day
-        ? formatPercentChange(asset?.price?.relative_change_24h || asset?.price?.relativeChange24h)
-        : getPercentChangeForPrice(points[0]?.y ?? 0),
-    [asset, chartType, getPercentChangeForPrice, points]
+  const latestChange = useDerivedValue(() =>
+    !points || chartType === ChartTypes.day
+      ? formatPercentChange(asset?.price?.relative_change_24h || asset?.price?.relativeChange24h)
+      : getPercentChangeForPrice(points[0]?.y ?? 0)
   );
 
   return {

diff --git a/src/hooks/charts/useChartThrottledPoints.ts b/src/hooks/charts/useChartThrottledPoints.ts
@@ -33,11 +33,11 @@ const traverseData = (prev: { nativePoints: ChartData[]; points: ChartData[] },
 };
 
 function useJumpingForm(
-  isLong: any,
-  heightWithChart: any,
-  heightWithoutChart: any,
-  shortHeightWithChart: any,
-  shortHeightWithoutChart: any
+  isLong: boolean,
+  heightWithChart: number,
+  heightWithoutChart: number,
+  shortHeightWithChart: number,
+  shortHeightWithoutChart: number
 ) {
   const { setOptions } = useNavigation();
 
@@ -74,7 +74,15 @@ export default function useChartThrottledPoints({
   uniBalance = true,
   shortHeightWithChart,
   shortHeightWithoutChart,
-}: any) {
+}: {
+  asset: any;
+  heightWithChart: number;
+  heightWithoutChart: number;
+  isPool: boolean;
+  uniBalance: boolean;
+  shortHeightWithChart: number;
+  shortHeightWithoutChart: number;
+}) {
   const { nativeCurrency } = useAccountSettings();
 
   let assetForColor = asset;
@@ -84,8 +92,6 @@ export default function useChartThrottledPoints({
 
   const color = useColorForAsset(assetForColor);
 
-  const [isFetchingInitially, setIsFetchingInitially] = useState(true);
-
   const { params } = useRoute<{
     key: string;
     name: string;
@@ -114,18 +120,23 @@ export default function useChartThrottledPoints({
     points: throttledPoints.points ?? [],
   });
 
-  useEffect(() => {
-    if (!fetchingCharts) {
-      setIsFetchingInitially(false);
-    }
-  }, [fetchingCharts]);
-
   // Only show the chart if we have chart data, or if chart data is still loading
   const showChart = useMemo(
     () =>
       (nativeCurrency !== 'ETH' || (asset?.mainnet_address !== ETH_ADDRESS && asset?.address !== ETH_ADDRESS)) &&
-      (throttledPoints?.points.length > 5 || throttledPoints?.points.length > 5 || (fetchingCharts && !isFetchingInitially)),
-    [asset?.address, asset?.mainnet_address, fetchingCharts, isFetchingInitially, nativeCurrency, throttledPoints?.points.length]
+      (throttledPoints?.points.length > 5 ||
+        !!chart.length ||
+        (fetchingCharts && (!!asset?.native?.change || (asset?.native?.price?.amount && asset?.native?.price?.amount !== '0')))),
+    [
+      asset?.address,
+      asset?.mainnet_address,
+      asset?.native?.change,
+      asset?.native?.price?.amount,
+      chart.length,
+      fetchingCharts,
+      nativeCurrency,
+      throttledPoints?.points.length,
+    ]
   );
 
   useJumpingForm(

diff --git a/src/react-native-animated-charts/src/charts/linear/ChartPath.tsx b/src/react-native-animated-charts/src/charts/linear/ChartPath.tsx
@@ -5,11 +5,9 @@ import {
   LongPressGestureHandlerGestureEvent,
   LongPressGestureHandlerProperties,
 } from 'react-native-gesture-handler';
-import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import Animated, {
-  cancelAnimation,
   FadeIn,
-  runOnJS,
+  cancelAnimation,
   runOnUI,
   useAnimatedGestureHandler,
   useAnimatedProps,
@@ -23,6 +21,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { getYForX } from 'react-native-redash';
 import Svg, { NumberProp, Path, PathProps } from 'react-native-svg';
+import { triggerHaptics } from 'react-native-turbo-haptics';
 import { IS_ANDROID, IS_IOS } from '@/env';
 import { ChartData, PathData } from '../../helpers/ChartContext';
 import { requireOnWorklet, useWorkletValue } from '../../helpers/requireOnWorklet';
@@ -60,11 +59,6 @@ function least(length: number, compare: (value: number) => number) {
   }
 }
 
-function impactHeavy() {
-  'worklet';
-  runOnJS(() => ReactNativeHapticFeedback.trigger('impactHeavy'));
-}
-
 const timingFeedbackDefaultConfig = {
   duration: 80,
 };
@@ -286,9 +280,7 @@ const ChartPathInner = React.memo(
 
             pathOpacity.value = withTiming(0, timingFeedbackConfig || timingFeedbackDefaultConfig);
 
-            if (hapticsEnabled) {
-              impactHeavy();
-            }
+            if (hapticsEnabled) triggerHaptics('soft');
           }
 
           state.value = event.state;
@@ -303,9 +295,7 @@ const ChartPathInner = React.memo(
           state.value = event.state;
           resetGestureState();
 
-          if (hapticsEnabled) {
-            impactHeavy();
-          }
+          if (hapticsEnabled) triggerHaptics('soft');
         },
         onFail: event => {
           state.value = event.state;
@@ -320,9 +310,7 @@ const ChartPathInner = React.memo(
             isActive.value = true;
             pathOpacity.value = withTiming(0, timingFeedbackConfig || timingFeedbackDefaultConfig);
 
-            if (hapticsEnabled) {
-              impactHeavy();
-            }
+            if (hapticsEnabled) triggerHaptics('soft');
           }
         },
       },