react-native-wagmi-charts 1.7.0 → 2.1.0

package/lib/module/utils/usePrevious.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export function usePrevious(value) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = React.useRef(); // Store current value in ref
+
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+
+  return ref.current;
+}
+//# sourceMappingURL=usePrevious.js.map

package/lib/module/utils/usePrevious.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePrevious.ts"],"names":["React","usePrevious","value","ref","useRef","useEffect","current"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAO,SAASC,WAAT,CAAwBC,KAAxB,EAAkC;AACvC;AACA;AACA,QAAMC,GAAG,GAAGH,KAAK,CAACI,MAAN,EAAZ,CAHuC,CAIvC;;AACAJ,EAAAA,KAAK,CAACK,SAAN,CAAgB,MAAM;AACpBF,IAAAA,GAAG,CAACG,OAAJ,GAAcJ,KAAd;AACD,GAFD,EAEG,CAACA,KAAD,CAFH,EALuC,CAO1B;AACb;;AACA,SAAOC,GAAG,CAACG,OAAX;AACD","sourcesContent":["import * as React from 'react';\n\nexport function usePrevious<T>(value: T) {\n  // The ref object is a generic container whose current property is mutable ...\n  // ... and can hold any value, similar to an instance property on a class\n  const ref = React.useRef<T>();\n  // Store current value in ref\n  React.useEffect(() => {\n    ref.current = value;\n  }, [value]); // Only re-run if value changes\n  // Return previous value (happens before update in useEffect above)\n  return ref.current;\n}\n"]}

package/lib/typescript/src/charts/candle/HoverTrap/index.web.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LineChartHoverTrap: () => JSX.Element;

package/lib/typescript/src/charts/candle/utils/getDomain.d.ts

@@ -0,0 +1,2 @@
+import type { TCandle } from '../types';
+export declare function getDomain(rows: TCandle[]): [min: number, max: number];

package/lib/typescript/src/charts/candle/utils/getHeight.d.ts

@@ -0,0 +1,6 @@
+import type { TDomain } from '../types';
+export declare function getHeight({ value, domain, maxHeight, }: {
+    value: number;
+    domain: TDomain;
+    maxHeight: number;
+}): number;

package/lib/typescript/src/charts/candle/utils/getPrice.d.ts

@@ -0,0 +1,6 @@
+import type { TDomain } from '../types';
+export declare function getPrice({ y, domain, maxHeight, }: {
+    y: number;
+    domain: TDomain;
+    maxHeight: number;
+}): number;

package/lib/typescript/src/charts/candle/utils/getY.d.ts

@@ -0,0 +1,6 @@
+import type { TDomain } from '../types';
+export declare function getY({ value, domain, maxHeight, }: {
+    value: number;
+    domain: TDomain;
+    maxHeight: number;
+}): number;

package/lib/typescript/src/charts/candle/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './getDomain';
+export * from './getHeight';
+export * from './getPrice';
+export * from './getY';

package/lib/typescript/src/charts/line/Chart.d.ts

@@ -5,14 +5,16 @@ export declare const LineChartDimensionsContext: React.Context<{
     height: number;
     path: string;
     area: string;
+    shape: any;
     gutter: number;
+    pathWidth: number;
 }>;
 declare type LineChartProps = ViewProps & {
     children: React.ReactNode;
     yGutter?: number;
     width?: number;
     height?: number;
-    shape?: string;
+    shape?: unknown;
     /**
      * If your `LineChart.Provider` uses a dictionary with multiple IDs for multiple paths, then this field is required.
      */
@@ -20,4 +22,7 @@ declare type LineChartProps = ViewProps & {
     absolute?: boolean;
 };
 export declare function LineChart({ children, yGutter, width, height, shape, id, absolute, ...props }: LineChartProps): JSX.Element;
+export declare namespace LineChart {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/ChartPath.d.ts

@@ -1,18 +1,27 @@
 import * as React from 'react';
-import Animated from 'react-native-reanimated';
+import { WithTimingConfig } from 'react-native-reanimated';
 import { LineChartPathProps } from './Path';
 export declare const LineChartPathContext: React.Context<{
     color: string;
+    isInactive: boolean;
     isTransitionEnabled: boolean;
 }>;
 declare type LineChartPathWrapperProps = {
     animationDuration?: number;
-    animationProps?: Partial<Animated.WithTimingConfig>;
+    animationProps?: Omit<Partial<WithTimingConfig>, 'duration'>;
     children?: React.ReactNode;
     color?: string;
+    inactiveColor?: string;
     width?: number;
+    widthOffset?: number;
     pathProps?: Partial<LineChartPathProps>;
     showInactivePath?: boolean;
+    animateOnMount?: 'foreground';
+    mountAnimationDuration?: number;
+    mountAnimationProps?: Partial<WithTimingConfig>;
 };
-export declare function LineChartPathWrapper({ animationDuration, animationProps, children, color, width: pathWidth, pathProps, showInactivePath, }: LineChartPathWrapperProps): JSX.Element;
+export declare function LineChartPathWrapper({ animationDuration, animationProps, children, color, inactiveColor, width: strokeWidth, widthOffset, pathProps, showInactivePath, animateOnMount, mountAnimationDuration, mountAnimationProps, }: LineChartPathWrapperProps): JSX.Element;
+export declare namespace LineChartPathWrapper {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/Context.d.ts

@@ -7,6 +7,10 @@ declare type LineChartProviderProps = {
     data: TLineChartDataProp;
     yRange?: YRangeProp;
     onCurrentIndexChange?: (x: number) => void;
+    xLength?: number;
 };
-export declare function LineChartProvider({ children, data, yRange, onCurrentIndexChange, }: LineChartProviderProps): JSX.Element;
+export declare function LineChartProvider({ children, data, yRange, onCurrentIndexChange, xLength, }: LineChartProviderProps): JSX.Element;
+export declare namespace LineChartProvider {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/Cursor.d.ts

@@ -8,3 +8,6 @@ export declare const CursorContext: React.Context<{
     type: string;
 }>;
 export declare function LineChartCursor({ children, type, ...props }: LineChartCursorProps): JSX.Element;
+export declare namespace LineChartCursor {
+    var displayName: string;
+}

package/lib/typescript/src/charts/line/CursorCrosshair.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ViewProps } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { LineChartCursorProps } from './Cursor';
-declare type LineChartCursorCrosshairProps = Omit<LineChartCursorProps, 'type'> & {
+declare type LineChartCursorCrosshairProps = Omit<LineChartCursorProps, 'children' | 'type'> & {
     children?: React.ReactNode;
     color?: string;
     size?: number;
@@ -12,4 +12,7 @@ declare type LineChartCursorCrosshairProps = Omit<LineChartCursorProps, 'type'>
     crosshairOuterProps?: ViewProps;
 };
 export declare function LineChartCursorCrosshair({ children, color, size, outerSize, crosshairWrapperProps, crosshairProps, crosshairOuterProps, ...props }: LineChartCursorCrosshairProps): JSX.Element;
+export declare namespace LineChartCursorCrosshair {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/CursorLine.d.ts

@@ -5,5 +5,8 @@ declare type LineChartCursorLineProps = {
     color?: string;
     lineProps?: Partial<LineProps>;
 };
-export declare const LineChartCursorLine: ({ children, color, lineProps, }: LineChartCursorLineProps) => JSX.Element;
+export declare function LineChartCursorLine({ children, color, lineProps, }: LineChartCursorLineProps): JSX.Element;
+export declare namespace LineChartCursorLine {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/DatetimeText.d.ts

@@ -10,4 +10,7 @@ declare type LineChartDatetimeProps = {
     style?: Animated.AnimateProps<RNTextProps>['style'];
 };
 export declare function LineChartDatetimeText({ locale, options, format, variant, style, }: LineChartDatetimeProps): JSX.Element;
+export declare namespace LineChartDatetimeText {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/Dot.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import Animated from 'react-native-reanimated';
+import { CircleProps } from 'react-native-svg';
+export declare type LineChartDotProps = {
+    dotProps?: Animated.AnimateProps<CircleProps>;
+    outerDotProps?: Animated.AnimateProps<CircleProps>;
+    color?: string;
+    inactiveColor?: string;
+    showInactiveColor?: boolean;
+    at: number;
+    size?: number;
+    hasPulse?: boolean;
+    hasOuterDot?: boolean;
+    /**
+     * If `always`, the outer dot will still animate when interaction is active.
+     *
+     * If `while-inactive`, the outer dot will animate only when the interaction is inactive.
+     *
+     * Default: `while-inactive`
+     */
+    pulseBehaviour?: 'always' | 'while-inactive';
+    /**
+     * Defaults to `size * 4`
+     */
+    outerSize?: number;
+    pulseDurationMs?: number;
+};
+export declare function LineChartDot({ at, color: defaultColor, dotProps, hasOuterDot: defaultHasOuterDot, hasPulse, inactiveColor, outerDotProps, pulseBehaviour, pulseDurationMs, showInactiveColor, size, outerSize, }: LineChartDotProps): JSX.Element;
+export declare namespace LineChartDot {
+    var displayName: string;
+}

package/lib/typescript/src/charts/line/Gradient.d.ts

@@ -6,3 +6,6 @@ export declare type LineChartGradientProps = Animated.AnimateProps<PathProps> &
     children?: React.ReactNode;
 };
 export declare function LineChartGradient({ color: overrideColor, children, ...props }: LineChartGradientProps): JSX.Element;
+export declare namespace LineChartGradient {
+    var displayName: string;
+}

package/lib/typescript/src/charts/line/Group.d.ts

@@ -1,6 +1,5 @@
-import { ReactNode, ReactChild } from 'react';
+import { ReactNode } from 'react';
 import { ViewProps } from 'react-native';
-export default function flattenChildren(children: ReactNode, depth?: number, keys?: (string | number)[]): ReactChild[];
 declare type Props = {
     children: ReactNode;
 } & ViewProps;

package/lib/typescript/src/charts/line/Highlight.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import Animated from 'react-native-reanimated';
+import { PathProps } from 'react-native-svg';
+export declare type LineChartColorProps = Animated.AnimateProps<PathProps> & {
+    color?: string;
+    from: number;
+    to: number;
+    showInactiveColor?: boolean;
+    inactiveColor?: string;
+    width?: number;
+};
+export declare function LineChartHighlight({ color, inactiveColor, showInactiveColor, from, to, width: strokeWidth, ...props }: LineChartColorProps): JSX.Element;
+export declare namespace LineChartHighlight {
+    var displayName: string;
+}

package/lib/typescript/src/charts/line/HorizontalLine.d.ts

@@ -29,5 +29,8 @@ declare type HorizontalLineProps = {
         value: number;
     } | number;
 };
-export declare const LineChartHorizontalLine: ({ color, lineProps, at, offsetY, }: HorizontalLineProps) => JSX.Element;
+export declare function LineChartHorizontalLine({ color, lineProps, at, offsetY, }: HorizontalLineProps): JSX.Element;
+export declare namespace LineChartHorizontalLine {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/HoverTrap/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LineChartHoverTrap: () => JSX.Element;

package/lib/typescript/src/charts/line/HoverTrap/index.web.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LineChartHoverTrap: () => JSX.Element;

package/lib/typescript/src/charts/line/Path.d.ts

@@ -3,6 +3,7 @@ import Animated from 'react-native-reanimated';
 import { PathProps } from 'react-native-svg';
 export declare type LineChartPathProps = Animated.AnimateProps<PathProps> & {
     color?: string;
+    inactiveColor?: string;
     width?: number;
     isInactive?: boolean;
     /**
@@ -22,4 +23,7 @@ export declare type LineChartPathProps = Animated.AnimateProps<PathProps> & {
      */
     isTransitionEnabled?: boolean;
 };
-export declare function LineChartPath({ color, width: strokeWidth, isInactive, isTransitionEnabled, ...props }: LineChartPathProps): JSX.Element;
+export declare function LineChartPath({ color, inactiveColor, width: strokeWidth, ...props }: LineChartPathProps): JSX.Element;
+export declare namespace LineChartPath {
+    var displayName: string;
+}

package/lib/typescript/src/charts/line/PriceText.d.ts

@@ -9,3 +9,6 @@ export declare type LineChartPriceTextProps = {
     style?: Animated.AnimateProps<RNTextProps>['style'];
 };
 export declare function LineChartPriceText({ format, precision, variant, style, }: LineChartPriceTextProps): JSX.Element;
+export declare namespace LineChartPriceText {
+    var displayName: string;
+}

package/lib/typescript/src/charts/line/Tooltip.d.ts

@@ -12,4 +12,7 @@ declare type LineChartTooltipProps = Animated.AnimateProps<ViewProps> & {
     textStyle?: LineChartPriceTextProps['style'];
 };
 export declare function LineChartTooltip({ children, xGutter, yGutter, cursorGutter, position, textProps, textStyle, ...props }: LineChartTooltipProps): JSX.Element;
+export declare namespace LineChartTooltip {
+    var displayName: string;
+}
 export {};

package/lib/typescript/src/charts/line/index.d.ts

@@ -1,24 +1,30 @@
 /// <reference types="react" />
-import { LineChartGradient } from './Gradient';
 import { LineChart as _LineChart } from './Chart';
 import { LineChartPathWrapper } from './ChartPath';
+import { LineChartHighlight } from './Highlight';
 import { LineChartProvider } from './Context';
 import { LineChartCursor } from './Cursor';
 import { LineChartCursorCrosshair } from './CursorCrosshair';
+import { LineChartCursorLine } from './CursorLine';
+import { LineChartDot } from './Dot';
+import { LineChartGradient } from './Gradient';
+import { LineChartGroup } from './Group';
+import { LineChartHorizontalLine } from './HorizontalLine';
 import { LineChartTooltip } from './Tooltip';
 import { LineChartPriceText } from './PriceText';
 import { LineChartDatetimeText } from './DatetimeText';
 import { useLineChartDatetime } from './useDatetime';
 import { useLineChartPrice } from './usePrice';
 import { useLineChart } from './useLineChart';
-import { LineChartGroup } from './Group';
-export * from './Gradient';
 export * from './Chart';
 export * from './ChartPath';
+export * from './Highlight';
 export * from './Context';
 export * from './Cursor';
 export * from './CursorCrosshair';
 export * from './CursorLine';
+export * from './Dot';
+export * from './Gradient';
 export * from './Tooltip';
 export * from './DatetimeText';
 export * from './Path';
@@ -28,28 +34,16 @@ export * from './useLineChart';
 export * from './usePrice';
 export * from './types';
 export declare const LineChart: typeof _LineChart & {
-    Gradient: typeof LineChartGradient;
     Chart: typeof _LineChart;
+    Dot: typeof LineChartDot;
     Path: typeof LineChartPathWrapper;
     Cursor: typeof LineChartCursor;
     CursorCrosshair: typeof LineChartCursorCrosshair;
-    CursorLine: ({ children, color, lineProps, }: {
-        children?: import("react").ReactNode;
-        color?: string | undefined;
-        lineProps?: Partial<import("react-native-svg").LineProps> | undefined;
-    }) => JSX.Element;
-    HorizontalLine: ({ color, lineProps, at, offsetY, }: {
-        color?: string | undefined;
-        lineProps?: Partial<import("react-native-svg").LineProps> | undefined;
-        offsetY?: number | undefined;
-        at?: number | {
-            index: number;
-            value?: undefined;
-        } | {
-            index?: undefined;
-            value: number;
-        } | undefined;
-    }) => JSX.Element;
+    CursorLine: typeof LineChartCursorLine;
+    Gradient: typeof LineChartGradient;
+    Group: typeof LineChartGroup;
+    Highlight: typeof LineChartHighlight;
+    HorizontalLine: typeof LineChartHorizontalLine;
     Tooltip: typeof LineChartTooltip;
     Provider: typeof LineChartProvider;
     PriceText: typeof LineChartPriceText;
@@ -57,5 +51,5 @@ export declare const LineChart: typeof _LineChart & {
     useDatetime: typeof useLineChartDatetime;
     usePrice: typeof useLineChartPrice;
     useChart: typeof useLineChart;
-    Group: typeof LineChartGroup;
+    HoverTrap: () => JSX.Element;
 };

package/lib/typescript/src/charts/line/types.d.ts

@@ -14,6 +14,7 @@ export declare type TLineChartContext = {
     isActive: Animated.SharedValue<boolean>;
     domain: TLineChartDomain;
     yDomain: YDomain;
+    xLength: number;
 };
 export declare type YRangeProp = {
     min?: number;

package/lib/typescript/src/charts/line/useAnimatedPath.d.ts

@@ -0,0 +1,8 @@
+export default function useAnimatedPath({ enabled, path, }: {
+    enabled?: boolean;
+    path: string;
+}): {
+    animatedProps: Partial<{
+        d: string;
+    }>;
+};

package/lib/typescript/src/charts/line/useLineChart.d.ts

@@ -14,4 +14,5 @@ export declare function useLineChart(): {
     };
     domain: import("./types").TLineChartDomain;
     yDomain: import("./types").YDomain;
+    xLength: number;
 };

package/lib/typescript/src/charts/line/utils/getArea.d.ts

@@ -0,0 +1,9 @@
+import type { TLineChartData, YDomain } from '../types';
+export declare function getArea({ data, width, height, gutter, shape: _shape, yDomain, }: {
+    data: TLineChartData;
+    width: number;
+    height: number;
+    gutter: number;
+    shape?: unknown;
+    yDomain: YDomain;
+}): string;

package/lib/typescript/src/charts/line/utils/getDomain.d.ts

@@ -0,0 +1,2 @@
+import type { TLineChartPoint } from '../types';
+export declare function getDomain(rows: TLineChartPoint[]): [number, number];

package/lib/typescript/src/charts/line/utils/getPath.d.ts

@@ -0,0 +1,11 @@
+import type { TLineChartData, YDomain } from '../types';
+export declare function getPath({ data, from, to, width, height, gutter, shape: _shape, yDomain, }: {
+    data: TLineChartData;
+    from?: number;
+    to?: number;
+    width: number;
+    height: number;
+    gutter: number;
+    shape?: unknown;
+    yDomain: YDomain;
+}): string;

package/lib/typescript/src/charts/line/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './getArea';
+export * from './getDomain';
+export * from './getPath';
+export * from './interpolatePath';
+export * from './lineChartDataPropToArray';

package/lib/typescript/src/charts/line/{interpolatePath.d.ts → utils/interpolatePath.d.ts}

@@ -47,4 +47,4 @@ export declare function interpolatePathCommands(aCommandsInput: any, bCommandsIn
  *   end command object and returns true if the segment should be excluded from splitting.
  * @returns {Function} Interpolation function that maps t ([0, 1]) to a path `d` string.
  */
-export default function interpolatePath(a: any, b: any, excludeSegment: any): (t: any) => any;
+export declare function interpolatePath(a: any, b: any, excludeSegment: any): (t: any) => any;

package/lib/typescript/src/charts/line/utils/lineChartDataPropToArray.d.ts

@@ -0,0 +1,2 @@
+import type { TLineChartData, TLineChartDataProp } from '../types';
+export declare function lineChartDataPropToArray(dataProp: TLineChartDataProp): TLineChartData;

package/lib/typescript/src/index.d.ts

@@ -1,4 +1,4 @@
 export * from './charts/candle';
 export * from './charts/line';
-export * from './utils';
 export * from './components/AnimatedText';
+export * from './utils';

package/lib/typescript/src/utils/formatDatetime.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @worklet
+ */
+export declare function formatDatetime({ value, locale, options, }: {
+    value: number;
+    locale?: string;
+    options?: Intl.DateTimeFormatOptions;
+}): string;

package/lib/typescript/src/utils/formatPrice.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @worklet
+ */
+export declare function formatPrice({ value: _value, defaultPrice: _defaultPrice, precision, }: {
+    value: string;
+    defaultPrice?: string;
+    precision?: number;
+}): string;

package/lib/typescript/src/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './formatDatetime';
+export * from './formatPrice';
+export * from './usePrevious';

package/lib/typescript/src/utils/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare function usePrevious<T>(value: T): T | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wagmi-charts",
-  "version": "1.7.0",
+  "version": "2.1.0",
   "description": "A sweet candlestick chart for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -39,6 +39,7 @@
     "d3-interpolate-path": "^2.2.3",
     "d3-scale": "^2",
     "d3-shape": "^3.0.1",
+    "react-keyed-flatten-children": "^1.3.0",
     "react-native-redash": "^16.1.1",
     "react-native-svg": "^12.1.1"
   },
@@ -55,11 +56,11 @@
     "jest": "^27.0.6",
     "pod-install": "^0.1.24",
     "prettier": "^2.3.2",
-    "react": "^17.0.2",
-    "react-native": "^0.64.2",
+    "react": "17.0.1",
+    "react-native": "0.63.4",
     "react-native-builder-bob": "^0.18.1",
-    "react-native-gesture-handler": "^1.10.3",
-    "react-native-reanimated": "^2.2.0",
+    "react-native-gesture-handler": "^2.1.0",
+    "react-native-reanimated": "~2.3.1",
     "typescript": "^4.3.5"
   },
   "peerDependencies": {
@@ -92,7 +93,8 @@
           "useTabs": false
         }
       ],
-      "@typescript-eslint/no-explicit-any": "error"
+      "@typescript-eslint/no-explicit-any": "error",
+      "no-shadow": "off"
     }
   },
   "eslintIgnore": [

package/src/charts/candle/HoverTrap/index.web.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { parse } from 'react-native-redash';
+
+import { LineChartDimensionsContext } from '../../line/Chart';
+import { useLineChart } from '../../line/useLineChart';
+
+// @ts-expect-error missing types
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+
+let isEnabled = false;
+
+// the following logic comes from the creator of react-native-web
+// https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a
+// it's also used by MotiPressable's hover interactions
+// https://github.com/nandorojo/moti/blob/master/packages/interactions/src/pressable/hoverable.tsx
+if (canUseDOM) {
+  /**
+   * Web browsers emulate mouse events (and hover states) after touch events.
+   * This code infers when the currently-in-use modality supports hover
+   * (including for multi-modality devices) and considers "hover" to be enabled
+   * if a mouse movement occurs more than 1 second after the last touch event.
+   * This threshold is long enough to account for longer delays between the
+   * browser firing touch and mouse events on low-powered devices.
+   */
+  const HOVER_THRESHOLD_MS = 1000;
+  let lastTouchTimestamp = 0;
+
+  function enableHover() {
+    if (isEnabled || Date.now() - lastTouchTimestamp < HOVER_THRESHOLD_MS) {
+      return;
+    }
+    isEnabled = true;
+  }
+
+  function disableHover() {
+    lastTouchTimestamp = Date.now();
+    if (isEnabled) {
+      isEnabled = false;
+    }
+  }
+
+  document.addEventListener('touchstart', disableHover, true);
+  document.addEventListener('touchmove', disableHover, true);
+  document.addEventListener('mousemove', enableHover, true);
+}
+
+function isHoverEnabled(): boolean {
+  return isEnabled;
+}
+
+export const LineChartHoverTrap = () => {
+  const { width, path } = React.useContext(LineChartDimensionsContext);
+  const { currentX, currentIndex, isActive, data } = useLineChart();
+
+  const parsedPath = React.useMemo(
+    () => (path ? parse(path) : undefined),
+    [path]
+  );
+
+  const onMouseMove = React.useCallback(
+    ({ x }: { x: number }) => {
+      if (isHoverEnabled()) {
+        if (parsedPath) {
+          const boundedX = Math.min(x, width);
+          isActive.value = true;
+          currentX.value = boundedX;
+
+          // on Web, we could drag the cursor to be negative, breaking it
+          // so we clamp the index at 0 to fix it
+          // https://github.com/coinjar/react-native-wagmi-charts/issues/24
+          const minIndex = 0;
+          const boundedIndex = Math.max(
+            minIndex,
+            Math.round(boundedX / width / (1 / (data.length - 1)))
+          );
+
+          currentIndex.value = boundedIndex;
+        }
+      } else {
+        isActive.value = false;
+        currentIndex.value = -1;
+      }
+    },
+    [currentIndex, currentX, data.length, isActive, parsedPath, width]
+  );
+
+  const onMouseLeave = React.useCallback(() => {
+    isActive.value = false;
+    currentIndex.value = -1;
+  }, [currentIndex, isActive]);
+
+  return (
+    <View
+      style={StyleSheet.absoluteFill}
+      // @ts-expect-error mouse move event
+      onMouseMove={React.useCallback(
+        // eslint-disable-next-line no-undef
+        (e: React.MouseEvent<HTMLElement>) => {
+          let rect = e.currentTarget.getBoundingClientRect();
+          let x = e.clientX - rect.left; // x position within the element.
+
+          onMouseMove({ x });
+        },
+        [onMouseMove]
+      )}
+      onMouseLeave={onMouseLeave}
+    />
+  );
+};

package/src/charts/candle/utils/getDomain.ts

@@ -0,0 +1,9 @@
+import type { TCandle } from '../types';
+
+export function getDomain(rows: TCandle[]): [min: number, max: number] {
+  'worklet';
+  const values = rows.map(({ high, low }) => [high, low]).flat();
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  return [min - (max - min) * 0.025, max + (max - min) * 0.025];
+}