Untitled
unknown
plain_text
25 days ago
9.7 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 DepthStats = ({ symbolCode, showInfo }: any) => { const { colors }: any = useColors(); 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); const [firstData, setFirstData] = useState([]); useEffect(() => { if (symbolCode) { Matriks.subscribeDepth(symbolCode, (resp: any) => { if (resp?.depthList) { setFirstData(resp?.depthList); } else { setDepthData({ ...resp, type: 'depth' }); } }); return () => { Matriks.unsubscribeDepth(); }; } }, [symbolCode]); useEffect(() => { if (depthData?.type === 'depth') { const updatedFirstData: any = [...firstData]; updatedFirstData[depthData?.rowNumber] = depthData; setFirstData(updatedFirstData); } }, [depthData]); useEffect(() => { if (symbolCode) { Matriks.subscribeDepthStats(symbolCode, (resp: any) => { if (resp) { setDataStats(resp); } }); return () => { Matriks.unsubscribeDepthStats(); }; } }, [symbolCode]); useEffect(() => { setFirstData([]); }, [symbolCode]); const toggleSize = () => { setPriceLevelsSize(priceLevelsSize === 5 ? 20 : 5); setShowAllLevels(!showAllLevels); }; let { width } = useWindowDimensions(); const widthX = width - 270 - 32; const maxBuy = Math.max(...firstData.map((item: any) => parseFloat(item?.bidQuantity?.replace(',', '')))); const maxSell = Math.max(...firstData.map((item: any) => parseFloat(item?.askQuantity?.replace(',', '')))); const orderBuySum = firstData.reduce((acc: any, item: any) => acc + toNumber(item.bidOrderCount), 0); const orderSellSum = firstData.reduce((acc: any, item: any) => acc + toNumber(item.askOrderCount), 0); const x = widthX / maxBuy; const y = widthX / maxSell; const header = () => ( <View row center marginH-24> <Text flex-1 secondaryText body2 style={styles(colors).textAlignLeft}> {t('order')} </Text> <Text flex-1 secondaryText body2 style={styles(colors).textAlignRight}> {t('Qty')} </Text> <Text flex-1 secondaryText body2 marginH-10 style={styles(colors).textAlignRight}> {t('BUY')} </Text> <Text flex-1 secondaryText body2 marginH-10 style={styles(colors).textAlignLeft}> {t('SELL')} </Text> <Text flex-1 secondaryText body2 style={styles(colors).textAlignLeft}> {t('Qty')} </Text> <Text flex-1 secondaryText body2 style={styles(colors).textAlignRight}> {t('orders')} </Text> </View> ); const renderItem = ({ item }: any) => { return ( <View center row marginV-12 marginH-24> <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 primaryText overline2 style={styles(colors).textAlignLeft}> {formattedByLanguage(i18n, toNumber(item?.bidOrderCount), 0, true)} </Text> <Text flex-1 primaryText overline2 style={styles(colors).textAlignRight}> {formattedByLanguage(i18n, toNumber(item?.bidQuantity), 0, true)} </Text> <View flex-1 paddingH-10> <TouchableOpacity onPress={() => onBuyStock(formattedByLanguage(i18n, toNumber(item?.bidPrice)))}> <Text style={styles(colors).priceBuySum} overline2> {item?.bidPrice > 1000 ? formattedByLanguage(i18n, toNumber(item?.bidPrice), 1, true) : formattedByLanguage(i18n, toNumber(item?.bidPrice))} </Text> </TouchableOpacity> </View> <View flex-1 paddingH-10> <TouchableOpacity onPress={() => onSellStock(formattedByLanguage(i18n, toNumber(item?.askPrice)))}> <Text style={styles(colors).priceSellSum} overline2> {item?.askPrice > 1000 ? formattedByLanguage(i18n, toNumber(item?.askPrice), 1, true) : formattedByLanguage(i18n, toNumber(item?.askPrice))} </Text> </TouchableOpacity> </View> <Text flex-1 primaryText overline2 style={styles(colors).textAlignLeft}> {formattedByLanguage(i18n, toNumber(item?.askQuantity), 0, true)} </Text> <Text flex-1 primaryText overline2 style={styles(colors).textAlignRight}> {formattedByLanguage(i18n, toNumber(item?.askOrderCount), 0, true)} </Text> </View> ); }; const renderInfo = () => { return ( <View center row marginH-24> <Text flex-1 primaryText heading7 marginT-10 style={styles(colors).textAlignLeft}> {formattedByLanguage(i18n, toNumber(orderBuySum), 0, true)} </Text> <Text flex-1 primaryText heading7 marginT-10 style={styles(colors).textAlignRight}> {formattedByLanguage(i18n, toNumber(dataStats?.bidQuantity), 0, true)} </Text> <Text flex-1 style={styles(colors).priceBuySum} heading7 marginT-10 marginH-10> {dataStats?.bidPrice > 1000 ? formattedByLanguage(i18n, toNumber(dataStats?.bidPrice), 1, true) : formattedByLanguage(i18n, toNumber(dataStats?.bidPrice))} </Text> <Text flex-1 style={styles(colors).priceSellSum} heading7 marginT-10 marginH-10> {dataStats?.askPrice > 1000 ? formattedByLanguage(i18n, toNumber(dataStats?.askPrice), 1, true) : formattedByLanguage(i18n, toNumber(dataStats?.askPrice))} </Text> <Text flex-1 primaryText heading7 marginT-10 style={styles(colors).textAlignLeft}> {formattedByLanguage(i18n, toNumber(dataStats?.askQuantity), 0, true)} </Text> <Text flex-1 primaryText heading7 marginT-10 style={styles(colors).textAlignRight}> {formattedByLanguage(i18n, toNumber(orderSellSum), 0, true)} </Text> </View> ); }; const slicedFirstData = firstData.slice(0, priceLevelsSize); return ( <> {firstData && firstData.length > 0 && ( <> <View marginB-20> {header()} <FlatList onScroll={e => e.preventDefault()} showsVerticalScrollIndicator={false} data={showAllLevels ? firstData : slicedFirstData} renderItem={renderItem} nestedScrollEnabled={true} scrollEnabled={false} keyExtractor={(item, index) => `item-${index}`} /> <View style={styles(colors).topBorder} /> {showInfo && renderInfo()} {firstData.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> <View marginB-16 style={styles(colors).topBorderOpacity} /> </> )} </> ); }; export default memo(DepthStats); const styles = (colors: any) => StyleSheet.create({ redColorView: { backgroundColor: colors.darkRedBg, position: 'absolute', left: 0, height: 24, borderRadius: 3, }, verticalLine: { height: 40, borderRightWidth: 1, position: 'absolute', borderColor: colors.white20, }, greenColorView: { backgroundColor: colors.darkGreenBg, position: 'absolute', right: 0, height: 24, borderRadius: 3, }, topBorder: { borderTopWidth: 1, borderColor: colors.white20, }, priceBuySum: { color: colors.greenPrice, textAlign: 'right', }, priceSellSum: { color: colors.redPrice, textAlign: 'left', }, textColor: { color: colors.action, fontSize: 12, }, arrowStyle: { marginLeft: 10, marginTop: 3, }, textAlignRight: { textAlign: 'right', }, textAlignLeft: { textAlign: 'left', }, topBorderOpacity: { borderTopWidth: 1, borderColor: colors.white20, opacity: 0.4, }, });
Leave a Comment