react-native-wagmi-charts 2.4.1 → 2.5.1

package/src/charts/line/types.ts

@@ -1,4 +1,4 @@
-import type Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 
 export type TLineChartPoint = {
   timestamp: number;
@@ -12,9 +12,9 @@ export type TLineChartDataProp =
 export type TLineChartData = Array<TLineChartPoint>;
 export type TLineChartDomain = [number, number];
 export type TLineChartContext = {
-  currentX: Animated.SharedValue<number>;
-  currentIndex: Animated.SharedValue<number>;
-  isActive: Animated.SharedValue<boolean>;
+  currentX: SharedValue<number>;
+  currentIndex: SharedValue<number>;
+  isActive: SharedValue<boolean>;
   domain: TLineChartDomain;
   yDomain: YDomain;
   xLength: number;

package/src/charts/line/useDatetime.ts

@@ -16,9 +16,14 @@ export function useLineChartDatetime({
   const { currentIndex, data } = useLineChart();
 
   const timestamp = useDerivedValue(() => {
-    if (typeof currentIndex.value === 'undefined' || currentIndex.value === -1)
+    if (
+      !data ||
+      typeof currentIndex.value === 'undefined' ||
+      currentIndex.value === -1
+    ) {
       return '';
-    return data[currentIndex.value].timestamp;
+    }
+    return data[currentIndex.value]?.timestamp ?? '';
   }, [currentIndex, data]);
 
   const timestampString = useDerivedValue(() => {

package/src/charts/line/usePrice.ts

@@ -12,14 +12,20 @@ export function useLineChartPrice({
   const { currentIndex, data } = useLineChart();
 
   const float = useDerivedValue(() => {
+    if (!data) {
+      return '';
+    }
+
     if (
       (typeof currentIndex.value === 'undefined' ||
         currentIndex.value === -1) &&
       index == null
-    )
+    ) {
       return '';
+    }
+
     let price = 0;
-    price = data[Math.min(index ?? currentIndex.value, data.length - 1)].value;
+    price = data[Math.min(index ?? currentIndex.value, data.length - 1)]!.value;
     return price.toFixed(precision).toString();
   }, [currentIndex, data, precision]);
   const formatted = useDerivedValue(() => {

package/src/charts/line/utils/getArea.ts

@@ -33,7 +33,7 @@ export function getArea({
     .range([height - gutter, gutter]);
   const area = shape
     .area()
-    .x((_: unknown, i: number) => scaleX(xDomain ? timestamps[i] : i))
+    .x((_: unknown, i: number) => scaleX(xDomain ? timestamps[i] ?? i : i))
     .y0((d: { value: unknown }) => scaleY(d.value as number))
     .y1(() => height)
     .curve(_shape)(data);

package/src/charts/line/utils/getPath.ts

@@ -43,7 +43,7 @@ export function getPath({
             .find((item) => item.timestamp === d.timestamp)
         : true
     )
-    .x((_: unknown, i: number) => scaleX(xDomain ? timestamps[i] : i))
+    .x((_: unknown, i: number) => scaleX(xDomain ? timestamps[i] ?? i : i))
     .y((d: { value: number }) => scaleY(d.value))
     .curve(_shape)(data);
   return path;

package/src/charts/line/utils/getXPositionForCurve.ts

@@ -5,5 +5,15 @@ export function getXPositionForCurve(path: Path, index: number) {
   if (index === 0) {
     return path.move.x;
   }
-  return path.curves[index - 1].to.x;
+
+  const point = path.curves[index - 1];
+
+  if (point === undefined) {
+    throw new Error(
+      `Index out of bounds: ${index}. ` +
+      `Expected an integer in the range [0, ${path.curves.length}]`
+    );
+  }
+
+  return point.to.x;
 }

package/src/components/AnimatedText.tsx

@@ -7,12 +7,12 @@ import Animated, {
   useAnimatedProps,
   useAnimatedReaction,
 } from 'react-native-reanimated';
-
+import type { SharedValue, AnimatedProps } from 'react-native-reanimated';
 Animated.addWhitelistedNativeProps({ text: true });
 
 interface AnimatedTextProps {
-  text: Animated.SharedValue<string>;
-  style?: Animated.AnimateProps<RNTextProps>['style'];
+  text: SharedValue<string>;
+  style?: AnimatedProps<RNTextProps>['style'];
 }
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

package/src/utils/formatPrice.ts

@@ -31,7 +31,7 @@ export function formatPrice({
   let res = `${Number(value).toFixed(decimals)}`;
   const vals = res.split('.');
   if (vals.length > 0) {
-    res = vals[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    res = vals[0]!.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     if (vals.length === 2) {
       return res + '.' + vals[1];
     }

package/.editorconfig

@@ -1,15 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-[*]
-
-indent_style = space
-indent_size = 2
-
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true

package/.gitattributes

@@ -1,3 +0,0 @@
-*.pbxproj -text
-# specific for windows script files
-*.bat text eol=crlf

package/.gitignore

@@ -1,60 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# XDE
-.expo/
-
-# VSCode
-.vscode/
-jsconfig.json
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IJ
-#
-.idea
-.gradle
-local.properties
-android.iml
-
-# Cocoapods
-#
-example/ios/Pods
-
-# node.js
-#
-node_modules/
-npm-debug.log
-yarn-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-android/app/libs
-android/keystores/debug.keystore
-
-# Expo
-.expo/*
-
-# generated by bob
-lib/

package/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-yarn lint --fix && git add -A && yarn typescript

package/.prettierrc.js

@@ -1,5 +0,0 @@
-const packageJson = require('./package.json');
-
-const config = packageJson.eslintConfig.rules['prettier/prettier'][1];
-
-module.exports = config;

package/.yarnrc

@@ -1,3 +0,0 @@
-# Override Yarn command so we can automatically setup the repo on running `yarn`
-
-yarn-path "scripts/bootstrap.js"

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-};

package/example/.expo/README.md

@@ -1,8 +0,0 @@
-> Why do I have a folder named ".expo" in my project?
-The ".expo" folder is created when an Expo project is started using "expo start" command.
-> What do the files contain?
-- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
-- "settings.json": contains the server configuration that is used to serve the application manifest.
-> Should I commit the ".expo" folder?
-No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
-Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/example/.expo/devices.json

@@ -1,3 +0,0 @@
-{
-  "devices": []
-}

package/example/README.md

@@ -1,41 +0,0 @@
-# react-native-wagmi-charts Example Project 🧑‍🏫
-
-## Getting Started
-
-First install project dependencies in this directory (`yarn` is recommended):
-
-```bash
-yarn install
-```
-
-After dependencies are installed, you can go ahead and run the project on either a simulator, or a real device using the following commands
-
-For iOS:
-
-```bash
-yarn run ios
-```
-
-For Android:
-
-```bash
-yarn run android
-```
-
-For Web:
-
-```bash
-yarn run web
-```
-
-
-## Example Charts
-
-The following charts are included:
-
-- Candlestick Chart
-- Line Chart
-
-### Sample Data
-
-The charts in this example use hardcoded data, which is stored in the `src/data` directory

package/example/app.json

@@ -1,22 +0,0 @@
-{
-  "name": "react-native-wagmi-charts-example",
-  "displayName": "CandlestickChart Example",
-  "expo": {
-    "name": "react-native-wagmi-charts-example",
-    "slug": "react-native-wagmi-charts-example",
-    "description": "Example app for react-native-wagmi-charts",
-    "privacy": "public",
-    "version": "1.0.0",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
-    "ios": {
-      "supportsTablet": true
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ]
-  }
-}

package/example/babel.config.js

@@ -1,23 +0,0 @@
-const path = require('path');
-const pkg = require('../package.json');
-
-module.exports = function (api) {
-  api.cache(true);
-
-  return {
-    presets: ['babel-preset-expo'],
-    plugins: [
-      [
-        'module-resolver',
-        {
-          extensions: ['.tsx', '.ts', '.js', '.json'],
-          alias: {
-            // For development, we want to alias the library to the source
-            [pkg.name]: path.join(__dirname, '..', pkg.source),
-          },
-        },
-      ],
-      'react-native-reanimated/plugin',
-    ],
-  };
-};

package/example/index.js

@@ -1,8 +0,0 @@
-import { registerRootComponent } from 'expo';
-
-import App from './src/App';
-
-// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
-// It also ensures that whether you load the app in the Expo client or in a native build,
-// the environment is set up appropriately
-registerRootComponent(App);

package/example/metro.config.js

@@ -1,40 +0,0 @@
-const path = require('path');
-const blacklist = require('metro-config/src/defaults/exclusionList');
-const escape = require('escape-string-regexp');
-const pak = require('../package.json');
-
-const root = path.resolve(__dirname, '..');
-
-const modules = Object.keys({
-  ...pak.peerDependencies,
-});
-
-module.exports = {
-  projectRoot: __dirname,
-  watchFolders: [root],
-
-  // We need to make sure that only one version is loaded for peerDependencies
-  // So we blacklist them at the root, and alias them to the versions in example's node_modules
-  resolver: {
-    blacklistRE: blacklist(
-      modules.map(
-        (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
-      )
-    ),
-
-    extraNodeModules: modules.reduce((acc, name) => {
-      acc[name] = path.join(__dirname, 'node_modules', name);
-      return acc;
-    }, {}),
-  },
-
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
-};

package/example/package.json

@@ -1,42 +0,0 @@
-{
-  "name": "react-native-wagmi-charts-example",
-  "description": "Example app for react-native-wagmi-charts",
-  "version": "0.0.1",
-  "private": true,
-  "main": "index",
-  "scripts": {
-    "android": "npx expo start --android",
-    "ios": "npx expo start --ios",
-    "web": "npx expo start --web",
-    "start": "npx expo start",
-    "test": "jest",
-    "postinstall": "patch-package"
-  },
-  "dependencies": {
-    "@types/react": "~18.2.14",
-    "bumbag": "^2.2.1",
-    "bumbag-native": "^2.3.0",
-    "expo": "^49.0.0",
-    "expo-haptics": "~12.4.0",
-    "expo-splash-screen": "~0.20.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.72.3",
-    "react-native-gesture-handler": "~2.12.0",
-    "react-native-reanimated": "~3.3.0",
-    "react-native-svg": "13.9.0",
-    "react-native-web": "~0.19.6"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
-    "@expo/webpack-config": "^18.0.1",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-preset-expo": "^9.5.0",
-    "jsonfile": "^6.1.0",
-    "patch-package": "^6.4.7",
-    "postinstall-postinstall": "^2.1.0",
-    "typescript": "^5.1.3"
-  }
-}

package/example/src/App.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import 'react-native-gesture-handler';
-import {
-  Box,
-  Button,
-  Text,
-  Heading,
-  Level,
-  Provider as BumbagNativeProvider,
-} from 'bumbag-native';
-
-import CandlestickChart from './CandlestickChart';
-import LineChart from './LineChart';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-
-export default function App() {
-  const [selected, setSelected] = React.useState('');
-  return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <BumbagNativeProvider>
-        <Box.Safe flex="1">
-          <Level
-            verticalBelow=""
-            paddingX="major-2"
-            paddingY="major-2"
-            alignY="center"
-          >
-            <Heading.H5 key={'heading'}>
-              React Native WAGMI Charts 💸
-            </Heading.H5>
-            {selected ? (
-              <Button
-                size="small"
-                key="back-button"
-                onPress={() => setSelected('')}
-              >
-                Back
-              </Button>
-            ) : null}
-          </Level>
-          <Box.Scroll>
-            {!selected && (
-              <Box paddingX="major-2" marginTop="major-6">
-                <Heading.H6 marginBottom="major-2">
-                  Click a chart below to get started
-                </Heading.H6>
-                <Button onPress={() => setSelected('candlestick')}>
-                  <Text>Candlestick</Text>
-                </Button>
-                <Button onPress={() => setSelected('line')}>
-                  <Text>Line</Text>
-                </Button>
-              </Box>
-            )}
-            <Box marginTop="major-2">
-              {selected === 'candlestick' && <CandlestickChart />}
-              {selected === 'line' && <LineChart />}
-            </Box>
-          </Box.Scroll>
-        </Box.Safe>
-      </BumbagNativeProvider>
-    </GestureHandlerRootView>
-  );
-}

package/example/src/CandlestickChart.tsx

@@ -1,155 +0,0 @@
-import * as React from 'react';
-import { Platform } from 'react-native';
-import { Box, Button, Flex, Heading, Text, Stack } from 'bumbag-native';
-import { CandlestickChart, TCandle } from 'react-native-wagmi-charts';
-import * as haptics from 'expo-haptics';
-
-import mockData from './data/candlestick-data.json';
-import mockData2 from './data/candlestick-data2.json';
-
-function invokeHaptic() {
-  if (['ios', 'android'].includes(Platform.OS)) {
-    haptics.impactAsync(haptics.ImpactFeedbackStyle.Light);
-  }
-}
-
-export default function App() {
-  const [data, setData] = React.useState<TCandle[]>(mockData);
-
-  return (
-    <>
-      <Heading.H5 paddingX="major-2" marginBottom="major-2">
-        Candlestick Chart 🕯
-      </Heading.H5>
-      <CandlestickChart.Provider data={data}>
-        <CandlestickChart>
-          <CandlestickChart.Candles />
-          <CandlestickChart.Crosshair onCurrentXChange={invokeHaptic}>
-            <CandlestickChart.Tooltip />
-          </CandlestickChart.Crosshair>
-        </CandlestickChart>
-        <Heading.H6>Load Data</Heading.H6>
-        <Box marginTop="major-2">
-          <Flex flexWrap={'wrap'}>
-            <Button onPress={() => setData(mockData)}>candlestick-data</Button>
-            <Button onPress={() => setData(mockData2)}>
-              candlestick-data2
-            </Button>
-          </Flex>
-        </Box>
-        <Stack padding="major-2" spacing="major-1">
-          <Heading.H6>PriceText</Heading.H6>
-          <Box>
-            <Text fontWeight="500">Formatted: </Text>
-            <Flex>
-              <Box flex="1">
-                <Text fontSize="100">Current</Text>
-                <CandlestickChart.PriceText />
-              </Box>
-              <Box flex="1">
-                <Text fontSize="100">Open</Text>
-                <CandlestickChart.PriceText type="open" />
-              </Box>
-              <Box flex="1">
-                <Text fontSize="100">High</Text>
-                <CandlestickChart.PriceText type="high" />
-              </Box>
-              <Box flex="1">
-                <Text fontSize="100">Low</Text>
-                <CandlestickChart.PriceText type="low" />
-              </Box>
-              <Box flex="1">
-                <Text fontSize="100">Close</Text>
-                <CandlestickChart.PriceText type="close" />
-              </Box>
-            </Flex>
-          </Box>
-          <Box>
-            <Text fontWeight="500">Value: </Text>
-            <Flex>
-              <Box flex="1">
-                <Text fontSize="100">Current</Text>
-                <CandlestickChart.PriceText variant="value" />
-              </Box>
-              <Box flex="1">
-                <Text fontSize="100">Open</Text>
-                <CandlestickChart.PriceText type="open" variant="value" />
-              </Box>
-              <Box flex="1">
-                <Text fontSize="100">High</Text>
-                <CandlestickChart.PriceText type="high" variant="value" />
-              </Box>
-              <Box flex="1">
-                <Text fontSize="100">Low</Text>
-                <CandlestickChart.PriceText type="low" variant="value" />
-              </Box>
-              <Box flex="1">
-                <Text fontSize="100">Close</Text>
-                <CandlestickChart.PriceText type="close" variant="value" />
-              </Box>
-            </Flex>
-          </Box>
-          <Box>
-            <Text fontWeight="500">Custom format: </Text>
-            <Flex>
-              <Box flex="1">
-                <Text fontSize="100">Current</Text>
-                <CandlestickChart.PriceText
-                  format={(d) => {
-                    'worklet';
-                    return `$${d.formatted} AUD`;
-                  }}
-                />
-              </Box>
-              <Box flex="1">
-                <Text fontSize="100">Open</Text>
-                <CandlestickChart.PriceText
-                  type="open"
-                  format={(d) => {
-                    'worklet';
-                    return `$${d.formatted} AUD`;
-                  }}
-                />
-              </Box>
-              <Box flex="1">
-                <Text fontSize="100">Close</Text>
-                <CandlestickChart.PriceText
-                  type="close"
-                  format={(d) => {
-                    'worklet';
-                    return `$${d.formatted} AUD`;
-                  }}
-                />
-              </Box>
-            </Flex>
-          </Box>
-        </Stack>
-        <Stack padding="major-2" spacing="minor-1">
-          <Heading.H6>DatetimeText</Heading.H6>
-          <Flex>
-            <Text fontWeight="500">Formatted: </Text>
-            <CandlestickChart.DatetimeText />
-          </Flex>
-          <Flex>
-            <Text fontWeight="500">Float: </Text>
-            <CandlestickChart.DatetimeText variant="value" />
-          </Flex>
-          <Flex>
-            <Text fontWeight="500">Custom format: </Text>
-            <CandlestickChart.DatetimeText
-              locale="en-AU"
-              options={{
-                year: 'numeric',
-                month: 'numeric',
-                day: 'numeric',
-                hour: 'numeric',
-                minute: 'numeric',
-                second: 'numeric',
-              }}
-            />
-          </Flex>
-        </Stack>
-      </CandlestickChart.Provider>
-    </>
-  );
-}