Untitled
unknown
plain_text
a month ago
8.2 kB
1
Indexable
Never
import React, { useEffect, useRef, useState, memo } from 'react'; import { Text, View } from 'react-native-ui-lib'; import { Matriks } from '../Matriks'; import { StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native'; import { FlatList } from 'react-native'; import { useTranslation } from 'react-i18next'; import { useColors } from '../../hooks'; import { useMatriksContext } from '../../context/MatriksStore'; import Icon from '../ui/Icon'; import { toNumber } from 'lodash'; import { formattedByLanguage } from '../../utils/formatCurrency'; import { navigateOrders } from '../../hooks/navigateOrders'; const header = (t: any) => ( <View row center> {['order', 'Qty', 'BUY', 'SELL', 'Qty', 'orders'].map((label, index) => ( <Text key={index} flex-1 center secondaryText body2> {t(label)} </Text> ))} </View> ); const DepthStats = ({ symbolCode, showInfo }: any) => { const { colors }: any = useColors(); const dataListRef = useRef([]); const [data, setData]: any = useState([]); const { t, i18n } = useTranslation(); const [depthData, setDepthData]: any = useMatriksContext(); const [dataStats, setDataStats]: any = useState([]); const [priceLevelsSize, setPriceLevelsSize] = useState(5); const [showAllLevels, setShowAllLevels] = useState(false); const { onSellStock, onBuyStock } = navigateOrders(symbolCode); useEffect(() => { if (symbolCode) { Matriks.subscribeDepth(symbolCode, (resp: any) => { if (resp?.depthList) { resp?.depthList.map((item: any) => setDepthData({ ...item, type: 'depth' })); } else { setDepthData({ ...resp, type: 'depth' }); } }); return () => { Matriks.unsubscribeDepth(); dataListRef.current = []; setData([]); }; } }, [symbolCode]); useEffect(() => { if (depthData && depthData?.type === 'depth') { const update = { ...depthData }; dataListRef.current.splice(0, 0, update); if (dataListRef.current.length > priceLevelsSize) { dataListRef.current = dataListRef.current.slice(0, priceLevelsSize); } setData(dataListRef.current); } }, [depthData, priceLevelsSize]); useEffect(() => { if (symbolCode) { Matriks.subscribeDepthStats(symbolCode, (resp: any) => { if (resp) { setDataStats(resp); } }); return () => { Matriks.unsubscribeDepthStats(); }; } }, [symbolCode]); const toggleSize = () => { setPriceLevelsSize(priceLevelsSize === 5 ? 20 : 5); setShowAllLevels(!showAllLevels); }; let { width } = useWindowDimensions(); const widthX = width - 270 - 32; const maxBuy = Math.max(...data.map((item: any) => parseFloat(item?.bidQuantity?.replace(',', '')))); const maxSell = Math.max(...data.map((item: any) => parseFloat(item?.askQuantity?.replace(',', '')))); const orderBuySum = data.reduce((acc: any, item: any) => acc + toNumber(item.bidOrderCount), 0); const orderSellSum = data.reduce((acc: any, item: any) => acc + toNumber(item.askOrderCount), 0); const x = widthX / maxBuy; const y = widthX / maxSell; function convertToInteger(number) { if (number !== undefined && number !== null) { const numberString = number.toString(); const integerString = numberString?.replace(/\.|,/g, ''); return parseInt(integerString, 10); } else { return 0; } } const renderItem = ({ item }: any) => { return ( <View center row flex-6 marginV-12> <View center style={{ position: 'absolute' }}> <View style={styles(colors).greenColorView} width={x * parseFloat(item?.bidQuantity?.replace(',', ''))} /> <View style={styles(colors).verticalLine} /> <View style={styles(colors).redColorView} width={y * parseFloat(item?.askQuantity?.replace(',', ''))} /> </View> <Text flex-1 center primaryText body2> {formattedByLanguage(i18n, convertToInteger(item?.bidOrderCount), 0)} </Text> <Text flex-1 center primaryText body2> {formattedByLanguage(i18n, convertToInteger(item?.bidQuantity), 0)} </Text> <View flex-1> <TouchableOpacity onPress={() => onBuyStock(formattedByLanguage(i18n, toNumber(item?.bidPrice)))}> <Text center style={styles(colors).priceBuySum} body2> {formattedByLanguage(i18n, toNumber(item?.bidPrice))} </Text> </TouchableOpacity> </View> <View flex-1> <TouchableOpacity onPress={() => onSellStock(formattedByLanguage(i18n, toNumber(item?.askPrice)))}> <Text center style={styles(colors).priceSellSum} body2> {formattedByLanguage(i18n, toNumber(item?.askPrice))} </Text> </TouchableOpacity> </View> <Text flex-1 center primaryText body2> {formattedByLanguage(i18n, convertToInteger(item?.askQuantity), 0)} </Text> <Text flex-1 center primaryText body2> {formattedByLanguage(i18n, convertToInteger(item?.askOrderCount), 0)} </Text> </View> ); }; const renderInfo = () => { return ( <View center row flex-6 style={styles(colors).topBorder}> <Text flex-1 center primaryText heading7> {formattedByLanguage(i18n, convertToInteger(orderBuySum), 0)} </Text> <Text flex-1 center primaryText heading7> {formattedByLanguage(i18n, convertToInteger(dataStats?.bidQuantity), 0)} </Text> <Text flex-1 center style={styles(colors).priceBuySum}> {formattedByLanguage(i18n, toNumber(dataStats?.bidPrice))} </Text> <Text flex-1 center style={styles(colors).priceSellSum} heading7> {formattedByLanguage(i18n, toNumber(dataStats?.askPrice))} </Text> <Text flex-1 center primaryText heading7> {formattedByLanguage(i18n, convertToInteger(dataStats?.askQuantity), 0)} </Text> <Text flex-1 center primaryText heading7> {formattedByLanguage(i18n, convertToInteger(orderSellSum), 0)} </Text> </View> ); }; return ( <> {data && data.length > 0 && ( <View marginB-20> {header(t)} <FlatList onScroll={e => e.preventDefault()} showsVerticalScrollIndicator={false} data={data} renderItem={renderItem} nestedScrollEnabled={true} scrollEnabled={false} keyExtractor={(item, index) => `item-${index}`} /> {showInfo && renderInfo()} {data.length >= 5 && ( <View marginT-16> <TouchableOpacity onPress={toggleSize}> <View row center> <Text style={styles(colors).textColor}> {showAllLevels ? t('top5PriceLevels') : t('allPriceLevels')} </Text> {!showAllLevels && ( <Icon style={styles(colors).arrowStyle} name="arrowRight" width={6} height={10} fill={colors.action} /> )} </View> </TouchableOpacity> </View> )} </View> )} </> ); }; export default memo(DepthStats); const styles = (colors: any) => StyleSheet.create({ redColorView: { backgroundColor: colors.darkRedBg, position: 'absolute', left: 0, height: 24, }, verticalLine: { height: 70, borderRightWidth: 1, position: 'absolute', borderColor: colors.white20, }, greenColorView: { backgroundColor: colors.darkGreenBg, position: 'absolute', right: 0, height: 24, }, topBorder: { borderTopWidth: 1, borderColor: colors.white20, }, priceBuySum: { color: colors.greenPrice, }, priceSellSum: { color: colors.redPrice, }, textColor: { color: colors.action, fontSize: 12, }, arrowStyle: { marginLeft: 10, marginTop: 3, }, });