Untitled
plain_text
2 months ago
3.4 kB
1
Indexable
Never
import React, { useState, useEffect } from 'react'; import { Text, View } from 'react-native-ui-lib'; import { FlatList, StyleSheet, useWindowDimensions } from 'react-native'; import { useTranslation } from 'react-i18next'; import { useColors } from '../../hooks'; import Matriks from '../Matriks/module'; import { ScrollView } from 'react-native-gesture-handler'; import { toNumber } from 'lodash'; type Props = { symbolCode: string; }; export function OrderBook({ symbolCode }: Props) { const { colors }: any = useColors(); const { t } = useTranslation(); const header = (t: any) => ( <View marginV-10 row center> {[, 'Qty', 'BUY', 'SELL', 'Qty'].map((label, index) => ( <Text key={index} marginL-30 marginR-30 secondaryText body2> {t(label)} </Text> ))} </View> ); const [orderBookData, setOrderBookData] = useState<any[]>([]); const subscribeOrderBook = async () => { try { await Matriks.subscribeOrderBook('GARAN', (response: any) => { setOrderBookData(response); }); } catch (error) { console.log('getPriceLevelAnalysis error', error); } }; useEffect(() => { subscribeOrderBook(); }, []); const data = orderBookData?.list || []; const buyQtySum = data.reduce( (acc: any, item: any) => acc + (item.bidQuantity ? toNumber(item.bidQuantity.replace(',', '')) : 0), 0, ); const sellQtySum = data.reduce( (acc: any, item: any) => acc + (item.askQuantity ? toNumber(item.askQuantity.replace(',', '')) : 0), 0, ); const buySum = data.reduce((acc: any, item: any) => acc + (item.bidPrice ? toNumber(item.bidPrice) : 0), 0); const sellSum = data.reduce((acc: any, item: any) => acc + (item.askPrice ? toNumber(item.askPrice) : 0), 0); return data?.length > 0 ? ( <View center> <FlatList data={data} ListHeaderComponent={() => header(t)} renderItem={({ item, index }: any) => ( <View row marginB-20 center> <Text key={index} body2 primaryText center flex-1> {item.bidQuantity} </Text> <Text key={index} body2 primaryText center style={styles(colors).greenColor} flex-1> {item.bidPrice} </Text> <Text key={index} body2 primaryText center style={styles(colors).redColor} flex-1> {item.askPrice} </Text> <Text key={index} body2 primaryText center flex-1> {item.askQuantity} </Text> </View> )} /> <View center style={styles(colors).topBorder}> <View marginV-10 row> <Text body2 marginL-30 marginR-30> {buyQtySum} </Text> <Text body2 style={{ color: colors.greenPrice }} marginL-30 marginR-30> {(buySum / data.length).toFixed(2)} </Text> <Text body2 style={{ color: colors.redPrice }} marginL-30 marginR-30> {(sellSum / data.length).toFixed(2)} </Text> <Text body2 marginL-30 marginR-30> {sellQtySum} </Text> </View> </View> </View> ) : null; } const styles = (colors: any) => StyleSheet.create({ redColor: { color: colors.redPrice, }, greenColor: { color: colors.greenPrice, }, topBorder: { borderTopWidth: 1, borderColor: colors.white20, }, });