(null);
+ const [rangeState, setRangeState] = useState<
+ { startDate: Date | undefined; endDate: Date | undefined; key: string }[]
+ >([
+ {
+ startDate: DATA_START_DATE,
+ endDate: DATE_NOW,
+ key: 'selection',
+ },
+ ]);
+
+ console.log({
+ startDate: DATA_START_DATE,
+ endDate: new Date(),
+ key: 'selection',
+ });
+
+ const [dataRange, setDataRange] = useState({ fromValue: DATA_START_DATE, toValue: DATE_NOW });
+
+ const onChange = (selectedDates: any) => {
+ const [start, end] = selectedDates;
+ const from = start ? strftime('%Y-%m-%d', new Date(start)) : undefined;
+ const to = end ? strftime('%Y-%m-%d', end) : undefined;
+ if (from === to) return;
+ setDataRange({ fromValue: start, toValue: end });
+ setDates({ from, to });
+ };
+
+ const dateRangeOptions = [
+ {
+ label: 'Last Month',
+ id: 1,
+ },
+ {
+ label: 'All Time',
+ id: 4,
+ isDefault: true,
+ },
+ ];
+
+ useEffect(() => {
+ setRangeState([
+ {
+ startDate: dataRange.fromValue,
+ endDate: dataRange.toValue,
+ key: 'selection',
+ },
]);
+ }, [dataRange.fromValue, dataRange.toValue]);
- console.log({
- startDate: DATA_START_DATE,
- endDate: new Date(),
- key: 'selection'
- })
-
- const [dataRange, setDataRange] = useState(
- { fromValue: DATA_START_DATE, toValue: DATE_NOW }
- )
-
- const onChange = (selectedDates: any) => {
- const [start, end] = selectedDates;
- const from = start ? strftime('%Y-%m-%d', new Date(start)) : undefined
- const to = end ? strftime('%Y-%m-%d', end) : undefined
- if (from === to) return;
- setDataRange({ fromValue: start, toValue: end })
- setDates({ from, to });
- };
-
- const dateRangeOptions = [{
- label: "Last Month",
- id: 1
- }, {
- label: "All Time",
- id: 4,
- isDefault: true
- }]
-
- useEffect(() => {
- setRangeState([
- {
- startDate: dataRange.fromValue,
- endDate: dataRange.toValue,
- key: 'selection'
- }
- ])
- }, [dataRange.fromValue, dataRange.toValue])
-
- const onSelectItem = (option: { id: number, label: string, isDefault?: boolean }) => {
-
- if (option.id == ALL_TIME_ID) {
- onChange([null, null])
- return;
- }
- const end = new Date()
- const start = moment().subtract(option.id, 'month').toDate();
- setSelectedDateRangeOption(option.id)
- if (option.id == ALL_TIME_ID) {
- onChange([null, null])
- } else {
- onChange([start, end])
- }
+ const onSelectItem = (option: { id: number; label: string; isDefault?: boolean }) => {
+ if (option.id == ALL_TIME_ID) {
+ onChange([null, null]);
+ return;
}
-
- useEffect(() => {
- let selected = false
- for (const option of dateRangeOptions) {
- if (option.isDefault) {
- selected = true
- onSelectItem(option)
- break
- }
- }
- if (!selected) {
- onSelectItem(dateRangeOptions[0])
- }
- }, [])
-
- const onDateRangeChange = (item: any) => {
- setRangeState([item.selection])
- if (item.selection.startDate == item.selection.endDate) {
- return
- }
- onChange([item.selection.startDate, item.selection.endDate])
+ const end = new Date();
+ const start = moment().subtract(option.id, 'month').toDate();
+ setSelectedDateRangeOption(option.id);
+ if (option.id == ALL_TIME_ID) {
+ onChange([null, null]);
+ } else {
+ onChange([start, end]);
+ }
+ };
+
+ useEffect(() => {
+ let selected = false;
+ for (const option of dateRangeOptions) {
+ if (option.isDefault) {
+ selected = true;
+ onSelectItem(option);
+ break;
+ }
}
+ if (!selected) {
+ onSelectItem(dateRangeOptions[0]);
+ }
+ }, []);
- const customContentRenderer = ({ props, state }: any) => {
- const start = dataRange.fromValue && dataRange.fromValue.toISOString().slice(0, 10)
- const end = dataRange.toValue && (dataRange.toValue as Date).toISOString().slice(0, 10)
-
- return (
- {dataRange.fromValue && dataRange.toValue && `${strftime('%m-%d-%y', dataRange.fromValue)} to ${strftime('%m-%d-%y', dataRange.toValue)}`}
- {(!dataRange.fromValue || !dataRange.toValue) && 'All time'}
-
)
- };
-
- const customDropdownRenderer = ({ props, state, methods }: any) => {
- const regexp = new RegExp(state.search, 'i');
-
- return (
-
- {/*
- {props.options
- .filter((item: any) => regexp.test(item[props.searchBy] || item[props.labelField]))
- .map((option: any, index: any) => {
- if (!props.keepSelectedInList && methods.isSelected(option)) {
- return null;
- }
-
- return (
- null : () => onSelectItem(option)}
- className={option.id === selectedDateRangeOption ? 'date-range-item selected' : 'date-range-item'}
- >
- {option[props.labelField]}
-
- );
- })}
- */}
-
-
-
-
- );
- };
-
- const selectedOption = dateRangeOptions.find(option => option.id === selectedDateRangeOption);
- const values = selectedOption ? [selectedOption] : [];
-
- const handleSelectChange = () => {
- // console.log('handleSelectChange')
+ const onDateRangeChange = (item: any) => {
+ setRangeState([item.selection]);
+ if (item.selection.startDate == item.selection.endDate) {
+ return;
}
+ onChange([item.selection.startDate, item.selection.endDate]);
+ };
+ const customContentRenderer = () => {
+ return (
+
+ {dataRange.fromValue &&
+ dataRange.toValue &&
+ `${strftime('%m-%d-%y', dataRange.fromValue)} to ${strftime(
+ '%m-%d-%y',
+ dataRange.toValue
+ )}`}
+ {(!dataRange.fromValue || !dataRange.toValue) && 'All time'}
+
+ );
+ };
+
+ const customDropdownRenderer = ({ props, state }: any) => {
return (
-
-
+
+
+
- )
-}
\ No newline at end of file
+
+ );
+ };
+
+ const selectedOption = dateRangeOptions.find((option) => option.id === selectedDateRangeOption);
+ const values = selectedOption ? [selectedOption] : [];
+
+ const handleSelectChange = () => {
+ // console.log('handleSelectChange')
+ };
+
+ return (
+
+
+
+ );
+};
diff --git a/components/home/charts/fees.tsx b/components/home/charts/fees.tsx
new file mode 100644
index 0000000..eb21a7c
--- /dev/null
+++ b/components/home/charts/fees.tsx
@@ -0,0 +1,136 @@
+import {
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+ ComposedChart,
+ Line,
+} from 'recharts';
+import { useEffect, useState } from 'react';
+import { useRequest } from '@/hooks/useRequest';
+import ChartWrapper from '../../common/chartWrapper';
+import { CHART_HEIGHT, YAXIS_WIDTH, BRIGHT_GREEN, GREEN } from '../../../constants';
+import {
+ yaxisFormatter,
+ xAxisFormatter,
+ tooltipFormatterCurrency,
+ tooltipFormatterDate,
+} from '../../../helpers';
+import { total_accrued_fees } from '../../../constants/api';
+
+const REQUESTS = [total_accrued_fees];
+
+export default function Fees() {
+ const [formattedData, setFormattedData] = useState([]);
+ const [dailyFeesAccrued, loading, error] = useRequest(REQUESTS[0], [], 'chart_data');
+
+ interface DailyFeesAccrued {
+ time: Date;
+ daily_accrued_fees: number;
+ }
+
+ interface MergedData {
+ time: Date;
+ daily_accrued_fees: number;
+ cumulative_accrued_fees: number;
+ }
+
+ const makeFormattedData = (dailyFeesAccrued: DailyFeesAccrued[]): MergedData[] => {
+ const result = [];
+ let cumulativeFees = 0;
+ for (let i = 0; i < dailyFeesAccrued.length; i++) {
+ const dailyFeeAccrued = dailyFeesAccrued[i].daily_accrued_fees ?? 0;
+ cumulativeFees += dailyFeeAccrued;
+ result.push({
+ time: new Date(dailyFeesAccrued[i].time),
+ daily_accrued_fees: dailyFeeAccrued,
+ cumulative_accrued_fees: cumulativeFees,
+ });
+ }
+
+ return result;
+ };
+
+ const formatData = () => {
+ const newFormattedData = makeFormattedData(dailyFeesAccrued);
+ setFormattedData(newFormattedData);
+ };
+
+ useEffect(() => {
+ if (!loading && !error) {
+ formatData();
+ }
+ }, [loading, error]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {
+ return Number(item.value) * -1;
+ }}
+ />
+
+
+
+ );
+}
diff --git a/components/home/charts/funding-rate.tsx b/components/home/charts/funding-rate.tsx
index 1619aa0..88e1d0c 100644
--- a/components/home/charts/funding-rate.tsx
+++ b/components/home/charts/funding-rate.tsx
@@ -1,198 +1,163 @@
import {
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
- LineChart,
- Line
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+ LineChart,
+ Line,
} from 'recharts';
-import { Box, Text, useMediaQuery } from "@chakra-ui/react"
import { useEffect, useState } from 'react';
import { useRequest } from '@/hooks/useRequest';
import ChartWrapper from '../../common/chartWrapper';
+import { CHART_HEIGHT } from '../../../constants';
import {
- CHART_HEIGHT,
- YAXIS_WIDTH,
- BRIGHT_GREEN,
- GREEN,
- RED,
-} from "../../../constants";
-import {
- yaxisFormatterNumber,
- tooltipFormatter,
- tooltipLabelFormatter,
- xAxisFormatter,
- formatterPercent,
- yaxisFormatter,
-} from '../../../helpers'
-import { getTokenHex } from "../../../constants/tokens";
-import {
- funding_rate,
-} from "../../../constants/api"
-
-const REQUESTS = [
- funding_rate
-];
-
-export default function FundingRate() {
- const [isMobile] = useMediaQuery('(max-width: 700px)');
-
- const [coinKeys, setCoinKeys] = useState([])
- const [formattedData, setFormattedData] = useState([])
- const [dataFundingRate, loadingFundingRate, errorFundingRate] = useRequest(REQUESTS[0], [], 'chart_data');
-
- const loading = loadingFundingRate;
- const error = errorFundingRate;
+ tooltipFormatter,
+ xAxisFormatter,
+ formatterPercent,
+ tooltipFormatterDate,
+} from '../../../helpers';
+import { createCoinSelectors } from '../../../helpers/utils';
- type FundingData = {
- coin: string,
- sum_funding: number,
- time: string,
- };
+import { getTokenColor, initialTokensSelected } from '../../../constants/tokens';
+import { funding_rate } from '../../../constants/api';
- type GroupedFundingData = {
- time: Date;
- [coin: string]: number | Date;
+const REQUESTS = [funding_rate];
- };
+export default function FundingRate() {
+ const [coinKeys, setCoinKeys] = useState([]);
+ const [formattedData, setFormattedData] = useState([]);
+ const [dataFundingRate, loadingFundingRate, errorFundingRate] = useRequest(
+ REQUESTS[0],
+ [],
+ 'chart_data'
+ );
+ const [coinsSelected, setCoinsSelected] = useState(initialTokensSelected);
+
+ const loading = loadingFundingRate;
+ const error = errorFundingRate;
+
+ type FundingData = {
+ coin: string;
+ sum_funding: number;
+ time: string;
+ };
+
+ type GroupedFundingData = {
+ time: Date;
+ [coin: string]: number | Date;
+ };
+
+ const groupByTimeAndFilterUnselected = (data: FundingData[]): GroupedFundingData[] => {
+ const map = new Map();
+ const coinFundingTotals = new Map();
+
+ data.forEach((item) => {
+ if (!coinsSelected.includes(item.coin)) {
+ return;
+ }
+ const key = item.time;
+ if (!map.has(key)) {
+ map.set(key, {
+ time: new Date(key),
+ unit: '%',
+ });
+ }
- const groupByTime = (data: FundingData[]): GroupedFundingData[] => {
- const map = new Map();
- const coinFundingTotals = new Map();
+ const existingEntry = map.get(key);
- data.forEach((item) => {
- const key = item.time;
- if (!map.has(key)) {
- map.set(key, {
- time: new Date(key),
- unit: "%"
- });
- }
+ const value = (existingEntry[item.coin] || 0) + item.sum_funding;
- const existingEntry = map.get(key);
+ existingEntry[item.coin] = value * 100;
- const value = (existingEntry[item.coin] || 0) + item.sum_funding;
+ // Update total funding for the coin
+ coinFundingTotals.set(item.coin, value * 100);
- existingEntry[item.coin] = value * 100;
+ map.set(key, existingEntry);
+ });
- // Update total funding for the coin
- coinFundingTotals.set(item.coin, value * 100);
+ const result = Array.from(map.values());
+ return result;
+ };
- map.set(key, existingEntry);
- });
+ const extractUniqueCoins = (fundingData: FundingData[]): string[] => {
+ const coinSet = new Set();
+ for (const data of fundingData) {
+ const { coin } = data;
+ if (coin !== 'time' && coin !== 'unit') {
+ coinSet.add(coin);
+ }
+ }
+ return Array.from(coinSet);
+ };
- // Get the top 10 coins by total funding over the whole time period
- const topCoins = Array.from(coinFundingTotals.entries())
- .sort((a, b) => b[1] - a[1])
- .slice(0, 10)
- .map(([coin]) => coin);
-
- // Filter out the coins not in the top 10 for each time period
- const result = Array.from(map.values()).map((record: any) => {
- Object.keys(record).forEach((coin) => {
- if (coin !== 'time' && !topCoins.includes(coin) && coin !== 'unit') {
- delete record[coin];
- }
- });
- return record;
- });
+ useEffect(() => {
+ if (!loading && !error) {
+ const uniqueCoins = extractUniqueCoins(dataFundingRate);
+ setCoinKeys(uniqueCoins);
+ }
+ }, [loading, dataFundingRate]);
- return result;
- };
-
-
- const extractUniqueCoins = (formattedData: GroupedFundingData[]): string[] => {
- const coinSet = new Set();
- for (const data of formattedData) {
- Object.keys(data).forEach(coin => {
- if (coin !== 'time' &&
- coin !== 'unit'
- ) {
- coinSet.add(coin);
- }
- });
- }
- const coinsArray = Array.from(coinSet);
- if (coinsArray.includes('Other')) {
- const index = coinsArray.indexOf('Other');
- coinsArray.splice(index, 1);
- coinsArray.push('Other');
- }
- return coinsArray;
- };
-
- const formatData = () => {
- if (dataFundingRate) {
- const groupedData = groupByTime(dataFundingRate);
- const uniquieCoins = extractUniqueCoins(groupedData);
- setFormattedData(groupedData);
- setCoinKeys(uniquieCoins);
- }
+ const formatData = () => {
+ if (dataFundingRate) {
+ const groupedAndFilteredData = groupByTimeAndFilterUnselected(dataFundingRate);
+ setFormattedData(groupedAndFilteredData);
}
+ };
- useEffect(() => {
- if (!loading && !error) {
- formatData();
- }
- }, [loading])
-
- return (
-
-
-
-
-
-
- ''}
- contentStyle={{
- textAlign: 'left',
- background: "#0A1F1B",
- borderColor: "#061412",
- color: "#fff",
- boxShadow: "0px 0px 7px rgb(0 0 0 / 20%)",
- borderRadius: "26px",
- maxHeight: "500px"
- }}
- itemSorter={(item) => {
- return Number(item.value) * -1;
- }}
- />
-
- {
- coinKeys.map(((coinName, i) => {
- return (
-
- )
- }))
- }
-
-
-
- Top 10 Coins over time
-
-
- )
-}
\ No newline at end of file
+ useEffect(() => {
+ if (!loading && !error) {
+ formatData();
+ }
+ }, [loading, coinsSelected]);
+
+ const coinSelectors = createCoinSelectors(coinKeys, coinsSelected, setCoinsSelected, formatData);
+
+ return (
+
+
+
+
+
+
+ {
+ return Number(item.value) * -1;
+ }}
+ />
+
+ {coinsSelected.map((coinName, i) => {
+ return (
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/components/home/charts/hlp-liquidator-profit.tsx b/components/home/charts/hlp-liquidator-profit.tsx
deleted file mode 100644
index a73605e..0000000
--- a/components/home/charts/hlp-liquidator-profit.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import {
- Bar,
- Cell,
- CartesianGrid,
- ComposedChart,
- Legend,
- Line,
- ResponsiveContainer,
- Tooltip,
- XAxis,
- YAxis
-} from 'recharts';
-import { sortBy, maxBy, minBy } from 'lodash'
-import { useMediaQuery } from "@chakra-ui/react"
-import { useRequest } from '@/hooks/useRequest';
-import { hlp_liquidator_pnl, cumulative_hlp_liquidator_pnl, hlp_liquidator_pnl_false, cumulative_hlp_liquidator_pnl_false } from "../../../constants/api"
-import ChartWrapper from '../../common/chartWrapper';
-import {
- CHART_HEIGHT,
- YAXIS_WIDTH,
- BRIGHT_GREEN,
- GREEN,
- RED,
-} from "../../../constants";
-import {
- yaxisFormatter,
- xAxisFormatter,
- tooltipFormatterCurrency,
-} from '../../../helpers'
-
-const REQUESTS = [
- hlp_liquidator_pnl,
- cumulative_hlp_liquidator_pnl,
- hlp_liquidator_pnl_false,
- cumulative_hlp_liquidator_pnl_false,
-];
-
-export default function HLPProfitLossChart() {
- const [isMobile] = useMediaQuery('(max-width: 700px)');
-
- const [chartDataLiquidator, setChartDataLiquidator] = useState(null);
- const [chartDataNonLiquidator, setChartDataNonLiquidator] = useState(null);
- const [dataMode, setDataMode] = useState<"HLP" | "NON_HLP">('HLP');
- const [dataHLPLiquidatorPNL, loadingHLPLiquidatorPNL, errorHLPLiquidatorPNL] = useRequest(REQUESTS[0], [], 'chart_data');
- const [dataCumulativeHLPLiquidatorPNL, loadingCumulativeHLPLiquidatorPNL, errorCumulative_HLPLiquidatorPNL] = useRequest(REQUESTS[1], [], 'chart_data');
- const [dataNonLiquidator, loadingNonLiquidator, errorNonLiquidator] = useRequest(REQUESTS[2], [], 'chart_data');
- const [dataCumulativeNonLiquidatorPNL, loadingCumulativeNonLiquidatorPNL, errorCumulative_NonLiquidatorPNL] = useRequest(REQUESTS[3], [], 'chart_data');
-
-
- const formatTradingData = (dataHLPLiquidatorPNL: any, dataCumulativeHLPLiquidatorPNL: any) => {
- let currentProfitCumulative = 0;
- let currentLossCumulative = 0;
-
- let data = sortBy(dataHLPLiquidatorPNL, (i) => Date.parse(i.time)).map((dataItem, index) => {
- const cumulative_pnl = dataCumulativeHLPLiquidatorPNL[index]?.cumulative_pnl || 0;
- return {
- cumulative_pnl: cumulative_pnl,
- total_pnl: dataItem.total_pnl,
- timestamp: new Date(dataItem.time),
- profit_cumulative: cumulative_pnl > 0 ? cumulative_pnl : 0,
- loss_cumulative: cumulative_pnl < 0 ? cumulative_pnl : 0,
- unit: "single",
- };
- });
-
- let result;
-
- if (data && data.length > 0) {
- const maxProfit = maxBy(data, item => item.profit_cumulative)?.profit_cumulative || 0;
- const maxLoss = minBy(data, item => item.loss_cumulative)?.loss_cumulative || 0;
- const maxPnl = maxBy(data, item => item.total_pnl)?.total_pnl || 0;
- const minPnl = minBy(data, item => item.total_pnl)?.total_pnl || 0;
- const maxCurrentCumulativePnl = maxBy(data, item => item.cumulative_pnl)?.cumulative_pnl || 0;
- const minCurrentCumulativePnl = minBy(data, item => item.cumulative_pnl)?.cumulative_pnl || 0;
-
- const stats = {
- maxProfit,
- maxLoss,
- currentProfitCumulative,
- currentLossCumulative,
- maxCurrentCumulativeProfitLoss: Math.max(currentProfitCumulative, -currentLossCumulative),
- minAbsPnl: minPnl,
- maxAbsPnl: Math.max(
- Math.abs(maxPnl),
- Math.abs(minPnl),
- ),
- maxAbsCumulativePnl: Math.max(
- Math.abs(maxCurrentCumulativePnl),
- Math.abs(minCurrentCumulativePnl)
- ),
- }
- result = {
- data,
- stats,
- };
- }
- return result;
- };
-
-
- useEffect(() => {
- if (dataHLPLiquidatorPNL.length > 0 && dataCumulativeHLPLiquidatorPNL.length > 0 && dataNonLiquidator.length > 0 && dataCumulativeNonLiquidatorPNL.length > 0) {
- const formattedTradingData = formatTradingData(dataHLPLiquidatorPNL, dataCumulativeHLPLiquidatorPNL);
- const formattedDataNonLiquidator = formatTradingData(dataNonLiquidator, dataCumulativeNonLiquidatorPNL);
- setChartDataLiquidator(formattedTradingData);
- setChartDataNonLiquidator(formattedDataNonLiquidator);
- }
- }, [dataHLPLiquidatorPNL, dataCumulativeHLPLiquidatorPNL, dataNonLiquidator, dataCumulativeNonLiquidatorPNL]);
-
-
- const controls = {
- toggles: [
- {
- text: "HLP",
- event: () => setDataMode('HLP'),
- active: dataMode === 'HLP',
- },
- {
- text: "Liquidator",
- event: () => setDataMode('NON_HLP'),
- active: dataMode === 'NON_HLP',
- }
- ]
- }
-
- const chartInfo = dataMode === 'HLP' ? chartDataLiquidator : chartDataNonLiquidator;
- const chartData = chartInfo ? chartInfo.data : [];
- const domainYRight = [-chartInfo?.stats.maxAbsCumulativePnl * 1.10, chartInfo?.stats.maxAbsCumulativePnl * 1.10]
- const domainYLeft = [-chartInfo?.stats.maxAbsPnl * 1.10, chartInfo?.stats.maxAbsPnl * 1.10]
-
- return (
-
-
-
-
-
-
-
- ''}
- contentStyle={{
- textAlign: 'left',
- background: "#0A1F1B",
- borderColor: "#061412",
- boxShadow: "0px 0px 7px rgb(0 0 0 / 20%)",
- borderRadius: "26px",
- maxHeight: "500px"
- }}
- itemSorter={(item) => {
- return Number(item.value) * -1;
- }}
- />
-
-
- {(chartData || []).map((item: any, i: number) => {
- return 0 ? GREEN : RED} />
- })}
- maxBarSize={20}
- |
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/components/home/charts/hlp.tsx b/components/home/charts/hlp.tsx
new file mode 100644
index 0000000..e0b338c
--- /dev/null
+++ b/components/home/charts/hlp.tsx
@@ -0,0 +1,362 @@
+import {
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+ Bar,
+ Cell,
+ Line,
+ ComposedChart,
+} from 'recharts';
+import { Box, Text } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import { useRequest } from '@/hooks/useRequest';
+
+import ChartWrapper from '../../common/chartWrapper';
+import { BLUE, BRIGHT_GREEN, CHART_HEIGHT, GREEN, ORANGE, RED } from '../../../constants';
+import {
+ tooltipFormatterDate,
+ tooltipFormatterCurrency,
+ xAxisFormatter,
+ yaxisFormatter,
+ tooltipFormatterLongShort,
+} from '../../../helpers';
+
+import { getTokenColor } from '@/constants/tokens';
+import { asset_ctxs, hlp_liquidator_pnl, hlp_positions } from '@/constants/api';
+const REQUESTS = [hlp_positions, asset_ctxs, hlp_liquidator_pnl];
+
+export default function Hlp() {
+ const [dataHlpPositions, loadingDataHlpPositions, errorDataHlpPositions] = useRequest(
+ REQUESTS[0],
+ [],
+ 'chart_data'
+ );
+ const [assetCtxs, loadingAssetCtxs, errorAssetCtxs] = useRequest(REQUESTS[1], [], 'chart_data');
+ const [dataHlpPnL, loadingHlpLiquidatorPNL, errorHlpLiquidatorPNL] = useRequest(
+ REQUESTS[2],
+ [],
+ 'chart_data'
+ );
+ const [dataMode, setDataMode] = useState<'COINS' | 'NET' | 'PNL' | 'HEDGED'>('PNL');
+ const [coins, setCoins] = useState([]);
+
+ const [formattedHlpPnL, setFormattedHlpPnL] = useState([]);
+ const [formattedData, setFormattedData] = useState([]);
+
+ const loading = loadingAssetCtxs | loadingDataHlpPositions | loadingHlpLiquidatorPNL;
+ const error = errorAssetCtxs | errorDataHlpPositions | errorHlpLiquidatorPNL;
+
+ type HlpPosition = {
+ time: string;
+ coin: string;
+ daily_ntl: number;
+ daily_ntl_abs: number;
+ };
+
+ type AssetCtx = {
+ time: string;
+ coin: string;
+ avg_oracle_px: number;
+ first_oracle_px: number;
+ last_oracle_px: number;
+ avg_open_interest: number;
+ };
+
+ type HlpPnl = {
+ time: Date;
+ pnl: number;
+ cumulativePnl: number;
+ };
+
+ type GroupedData = {
+ time: Date;
+ daily_ntl: number;
+ [coin: string]: any;
+ hedged_pnl: number;
+ };
+
+ const getOraclePxs = (assetCtxs: AssetCtx[]): {firstOraclePxs: Map, lastOraclePxs: Map} => {
+ const firstOraclePxs = new Map();
+ const lastOraclePxs = new Map();
+
+ assetCtxs.forEach((item) => {
+ firstOraclePxs.set(item.coin + item.time, item.first_oracle_px);
+ lastOraclePxs.set(item.coin + item.time, item.last_oracle_px)
+ });
+ return {firstOraclePxs, lastOraclePxs};
+ };
+
+ const makeHlpPnl = (
+ dataHlpPnL: {
+ time: string;
+ total_pnl: number;
+ }[]
+ ): Map => {
+ const map = new Map();
+ let cumulativePnl = 0;
+ dataHlpPnL.forEach((item) => {
+ cumulativePnl += item.total_pnl;
+ map.set(item.time, {
+ time: new Date(item.time),
+ pnl: item.total_pnl,
+ cumulativePnl,
+ });
+ });
+ return map;
+ };
+
+ function getNextTime(time: string) {
+ const date = new Date(time);
+ date.setDate(date.getDate() + 1);
+
+ var dd = String(date.getDate()).padStart(2, '0');
+ var mm = String(date.getMonth() + 1).padStart(2, '0'); //January is 0!
+ var yyyy = date.getFullYear();
+
+ return yyyy + '-' + mm + '-' + dd + 'T00:00:00';
+ }
+
+ const makeFormattedData = (
+ hlpPositions: HlpPosition[],
+ hlpPnL: Map
+ ): [GroupedData[], string[]] => {
+ const map = new Map();
+ const uniqueTopCoins = new Set();
+
+ let hedgedCumulativePnl = 0;
+ const {firstOraclePxs, lastOraclePxs} = getOraclePxs(assetCtxs);
+
+ hlpPositions.forEach((item: HlpPosition) => {
+ let { time, coin, daily_ntl } = item;
+ if (!map.has(time)) {
+ const pnl = hlpPnL.get(time)?.pnl || 0;
+ hedgedCumulativePnl += pnl;
+ map.set(time, {
+ time: new Date(time),
+ daily_ntl: 0,
+ hedged_pnl: pnl,
+ hedged_cumulative_pnl: hedgedCumulativePnl,
+ Other: 0,
+ });
+ }
+
+ const existingEntry = map.get(time)!;
+ existingEntry[`${coin}`] = (existingEntry[`${coin}`] || 0) + daily_ntl;
+ existingEntry.daily_ntl += daily_ntl;
+
+ const firstOraclePx = firstOraclePxs.get(coin + time);
+ let hedgedPnl = 0;
+ let lastOraclePx = lastOraclePxs.get(coin + time);
+ let curDayData = map.get(time);
+ let coinNtlPosition = curDayData ? curDayData[`${coin}`] : null;
+ if (lastOraclePx && firstOraclePx && coinNtlPosition) {
+ const pxChange = 1 - firstOraclePx / lastOraclePx;
+ const pnl = -1 * coinNtlPosition * pxChange;
+ hedgedPnl += pnl;
+ }
+
+ existingEntry.hedged_pnl += hedgedPnl;
+ hedgedCumulativePnl += hedgedPnl;
+ existingEntry.hedged_cumulative_pnl = hedgedCumulativePnl;
+ });
+
+ map.forEach((entry) => {
+ const coinEntries = Object.entries(entry).filter(
+ ([key]) =>
+ key !== 'time' &&
+ key !== 'daily_ntl' &&
+ key !== 'hedged_pnl' &&
+ key !== 'other' &&
+ key !== 'hedged_cumulative_pnl'
+ );
+ const sortedCoinEntries = coinEntries.sort(
+ (a, b) => Math.abs(Number(b[1])) - Math.abs(Number(a[1]))
+ );
+ const topCoins = sortedCoinEntries.slice(0, 10).map(([coin]) => coin);
+ const otherCoins = sortedCoinEntries.slice(10);
+
+ topCoins.forEach((coin) => uniqueTopCoins.add(coin));
+
+ let otherTotal = 0;
+ otherCoins.forEach(([coin, value]) => {
+ otherTotal += value;
+ delete entry[coin];
+ });
+ entry.Other = otherTotal;
+ });
+
+ const result = Array.from(map.values());
+ uniqueTopCoins.add('Other');
+ return [result, Array.from(uniqueTopCoins)];
+ };
+
+ const controls = {
+ toggles: [
+ {
+ text: 'PnL',
+ event: () => setDataMode('PNL'),
+ active: dataMode === 'PNL',
+ },
+ {
+ text: 'Hedged PnL',
+ event: () => setDataMode('HEDGED'),
+ active: dataMode === 'HEDGED',
+ },
+ {
+ text: 'Net position',
+ event: () => setDataMode('NET'),
+ active: dataMode === 'NET',
+ },
+ {
+ text: 'Coin positions',
+ event: () => setDataMode('COINS'),
+ active: dataMode === 'COINS',
+ },
+ ],
+ };
+
+ const formatData = () => {
+ if (dataHlpPositions && assetCtxs && dataHlpPnL) {
+ const newHlpPnL = makeHlpPnl(dataHlpPnL);
+ setFormattedHlpPnL(Array.from(newHlpPnL.values()));
+ const [groupedData, coins] = makeFormattedData(dataHlpPositions, newHlpPnL);
+ setCoins(coins);
+ setFormattedData(groupedData);
+ }
+ };
+
+ useEffect(() => {
+ if (!loading && !error) {
+ formatData();
+ }
+ }, [loading, error]);
+
+ return (
+
+
+
+
+
+
+ {
+ return Math.abs(Number(item.value)) * -1;
+ }}
+ />
+ {dataMode === 'NET' && (
+
+ {(formattedData || []).map((item: GroupedData, i: number) => {
+ return 0 ? BLUE : ORANGE} />;
+ })}
+ |
+ )}
+ {dataMode === 'COINS' &&
+ coins.map((coin, i) => {
+ return (
+
+ );
+ })}
+ {dataMode === 'HEDGED' && (
+ <>
+
+
+ {(formattedData || []).map((item: GroupedData, i: number) => {
+ return 0 ? GREEN : RED} />;
+ })}
+ |
+
+ )}
+ {dataMode === 'PNL' && (
+ <>
+
+
+ {formattedHlpPnL.map((item: HlpPnl, i: number) => {
+ return 0 ? GREEN : RED} />;
+ })}
+ |
+
+ )}
+
+
+
+
+ {dataMode === 'HEDGED' && (
+
+ Hedge each day's returns by holding the previous day's ending positions for
+ each asset.
+
+ )}
+
+
+
+ {dataMode === 'NET' && Net notional position over time}
+
+
+ );
+}
diff --git a/components/home/charts/liquidator.tsx b/components/home/charts/liquidator.tsx
new file mode 100644
index 0000000..2933bc9
--- /dev/null
+++ b/components/home/charts/liquidator.tsx
@@ -0,0 +1,370 @@
+import {
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+ ComposedChart,
+ Line,
+} from 'recharts';
+import { useEffect, useState } from 'react';
+import { useRequest } from '@/hooks/useRequest';
+import ChartWrapper from '../../common/chartWrapper';
+import {
+ CHART_HEIGHT,
+ YAXIS_WIDTH,
+ BRIGHT_GREEN,
+ BRAND_GREEN_2,
+ BRAND_GREEN_3,
+} from '../../../constants';
+import {
+ tooltipLabelFormatter,
+ yaxisFormatter,
+ xAxisFormatter,
+ tooltipFormatterCurrency,
+ tooltipFormatterDate,
+} from '../../../helpers';
+import { createCoinSelectors } from '../../../helpers/utils';
+
+import { getTokenColor, initialTokensSelectedWithOther } from '../../../constants/tokens';
+import {
+ cumulative_liquidated_notional,
+ daily_notional_liquidated_total,
+ daily_notional_liquidated_by_leverage_type,
+ daily_notional_liquidated_by_coin,
+ hlp_liquidator_pnl_false,
+ cumulative_hlp_liquidator_pnl_false,
+} from '../../../constants/api';
+
+const REQUESTS = [
+ cumulative_liquidated_notional,
+ daily_notional_liquidated_total,
+ daily_notional_liquidated_by_leverage_type,
+ daily_notional_liquidated_by_coin,
+ hlp_liquidator_pnl_false,
+ cumulative_hlp_liquidator_pnl_false,
+];
+
+export default function LiquidatorChart(props: any) {
+ const isMobile = props.isMobile;
+
+ const [dataMode, setDataMode] = useState<'COINS' | 'MARGIN'>('COINS');
+ const [coinsSelected, setCoinsSelected] = useState(initialTokensSelectedWithOther);
+ const [formattedDataCoins, setFormattedDataCoins] = useState([]);
+ const [formattedDataMargin, setFormattedDataMargin] = useState([]);
+
+ const [coinKeys, setCoinKeys] = useState([]);
+
+ const [dataCumulativeLiquidated, loadingCumulativeLiquidated, errorCumulativeLiquidated] =
+ useRequest(REQUESTS[0], [], 'chart_data');
+ const [dataDailyLiquidatedTotal, loadingDailyLiquidatedTotal, errorDailyUsdVolumeTotal] =
+ useRequest(REQUESTS[1], [], 'chart_data');
+ const [
+ dataDailyLiquidatedByMargin,
+ loadingDailyLiquidatedByMargin,
+ errorDailyLiquidatedByMargin,
+ ] = useRequest(REQUESTS[2], [], 'chart_data');
+ const [dataDailyLiquidatedByCoins, loadingDailyLiquidatedByCoins, errorDailyLiquidatedByCoins] =
+ useRequest(REQUESTS[3], [], 'chart_data');
+ const [
+ dataLiquidatorCumulativePnl,
+ loadingLiquidatorCumulativePnl,
+ errorLiquidatorCumulativePnl,
+ ] = useRequest(REQUESTS[5], [], 'chart_data');
+ const [formattedLiquidatorPnl, setFormattedLiquidatorPnl] = useState([]);
+
+ type LiquidatorPnl = {
+ time: Date;
+ pnl: number;
+ cumulativePnl: number;
+ };
+
+ const loading =
+ loadingCumulativeLiquidated ||
+ loadingDailyLiquidatedTotal ||
+ loadingDailyLiquidatedByMargin ||
+ loadingDailyLiquidatedByCoins ||
+ loadingLiquidatorCumulativePnl;
+ const error =
+ errorCumulativeLiquidated ||
+ errorDailyUsdVolumeTotal ||
+ errorDailyLiquidatedByMargin ||
+ errorDailyLiquidatedByCoins ||
+ errorLiquidatorCumulativePnl;
+ type CumulativeLiquidationData = { cumulative: number; time: string };
+
+ const formatCumulativeLiquidatedByTime = (
+ dataCumulativeLiquidated: CumulativeLiquidationData[]
+ ): { [key: string]: number } => {
+ const result: { [key: string]: number } = {};
+ for (const data of dataCumulativeLiquidated) {
+ result[data.time] = data.cumulative;
+ }
+ return result;
+ };
+
+ type LiquidationData = {
+ time: string;
+ leverage_type: 'Cross' | 'Isolated';
+ daily_notional_liquidated: number;
+ };
+
+ const formatLiquidatedByMargin = (
+ dataDailyLiquidatedByMargin: LiquidationData[],
+ formattedCumulativeLiquidatedByTime: { [key: string]: number }
+ ): any[] => {
+ const temp: { [key: string]: any } = {};
+ for (const data of dataDailyLiquidatedByMargin) {
+ if (!temp[data.time]) {
+ temp[data.time] = { all: 0 };
+ }
+ temp[data.time][data.leverage_type] = data.daily_notional_liquidated;
+ temp[data.time].all += data.daily_notional_liquidated;
+ }
+ const result: any[] = Object.entries(temp).map((item: any) => {
+ return {
+ time: new Date(item[0]),
+ crossed: item[1].hasOwnProperty('Cross') ? item[1].Cross : 0,
+ isolated: item[1].hasOwnProperty('Isolated') ? item[1].Isolated : 0,
+ all: item[1].all,
+ cumulative: formattedCumulativeLiquidatedByTime[item[0]],
+ };
+ });
+ return result;
+ };
+
+ type FormattedCoinTradesData = any[];
+
+ const formatDailyTradesByCoins = (
+ CoinsSelected: string[],
+ dataDailyTradesByCoin: { time: string; coin: string; daily_notional_liquidated: number }[],
+ formattedCumulativeByTime: { [key: string]: number }
+ ): FormattedCoinTradesData[] => {
+ const temp: { [key: string]: { all: number; [coin: string]: number } } = {};
+ for (const data of dataDailyTradesByCoin) {
+ if (!temp[data.time]) {
+ temp[data.time] = { all: 0 };
+ }
+ temp[data.time][data.coin] = data.daily_notional_liquidated;
+ temp[data.time].all += data.daily_notional_liquidated;
+ }
+
+ const selectedCoinData = (obj: { [coin: string]: number }) => {
+ const selectedEntries = Object.entries(obj).filter(
+ ([coin]) => CoinsSelected.includes(coin) || coin === 'all'
+ );
+ const otherEntries = Object.entries(obj).filter(
+ ([coin]) => !CoinsSelected.includes(coin) && coin !== 'all'
+ );
+ const otherVolume = otherEntries.reduce((total, [, volume]) => total + volume, 0);
+ return {
+ ...Object.fromEntries(selectedEntries),
+ Other: otherVolume,
+ };
+ };
+
+ const result: any[] = Object.entries(temp).map(([time, volumes]) => {
+ const selectedVolumes = selectedCoinData(volumes);
+ return {
+ time: new Date(time),
+ ...selectedVolumes,
+ cumulative: formattedCumulativeByTime[time as any],
+ unit: '',
+ };
+ });
+ return result;
+ };
+
+ const extractUniqueCoins = (coinData: any[]): string[] => {
+ const coinSet = new Set();
+ for (const data of coinData) {
+ if (
+ data.coin !== 'time' &&
+ data.coin !== 'unit' &&
+ data.coin !== 'cumulative' &&
+ data.coin !== 'all'
+ ) {
+ coinSet.add(data.coin);
+ }
+ }
+ return Array.from(coinSet);
+ };
+
+ const formatData = (CoinsSelected: string[]) => {
+ const formattedCumulativeLiquidatedByTime =
+ formatCumulativeLiquidatedByTime(dataCumulativeLiquidated);
+ const formattedVolumeByMargin = formatLiquidatedByMargin(
+ dataDailyLiquidatedByMargin,
+ formattedCumulativeLiquidatedByTime
+ );
+ const formattedDailyTradesByCoins = formatDailyTradesByCoins(
+ CoinsSelected,
+ dataDailyLiquidatedByCoins,
+ formattedCumulativeLiquidatedByTime
+ );
+ setCoinKeys(extractUniqueCoins(dataDailyLiquidatedByCoins));
+ setFormattedDataMargin(formattedVolumeByMargin);
+ setFormattedDataCoins(formattedDailyTradesByCoins);
+ console.log('dev formattedDailyTradesByCoins', formattedDailyTradesByCoins);
+ };
+
+ const controls = {
+ toggles: [
+ {
+ text: 'By coin',
+ event: () => setDataMode('COINS'),
+ active: dataMode === 'COINS',
+ },
+ {
+ text: 'By margin type',
+ event: () => setDataMode('MARGIN'),
+ active: dataMode === 'MARGIN',
+ },
+ ],
+ };
+
+ useEffect(() => {
+ if (!loading && !error) {
+ formatData(coinsSelected);
+ }
+ }, [loading, error]);
+
+ const dataModeToData = (dataMode: string) => {
+ switch (dataMode) {
+ case 'COINS':
+ return formattedDataCoins;
+ case 'MARGIN':
+ return formattedDataMargin;
+ case 'PNL':
+ return formattedLiquidatorPnl;
+ }
+ };
+
+ const pnlYDomain = () => {
+ let maxPnl = formattedLiquidatorPnl.reduce((max, curr) => {
+ return Math.abs(max.pnl) > Math.abs(curr.pnl) ? max : curr;
+ }).pnl;
+ return [-1 * Math.abs(maxPnl) * 1.1, Math.abs(maxPnl) * 1.1];
+ };
+
+ const cumulativePnlYDomain = () => {
+ let maxCumulativePnl = formattedLiquidatorPnl.reduce((max, curr) => {
+ return Math.abs(max.cumulativePnl) > Math.abs(curr.cumulativePnl) ? max : curr;
+ }).cumulativePnl;
+
+ return [-1 * Math.abs(maxCumulativePnl) * 1.1, Math.abs(maxCumulativePnl) * 1.1];
+ };
+
+ const coinSelectors = createCoinSelectors(coinKeys, coinsSelected, setCoinsSelected, formatData);
+
+ return (
+
+
+
+
+
+ {
+ return Math.abs(Number(item.value));
+ }}
+ />
+
+ {dataMode === 'COINS' && (
+ <>
+ {coinsSelected.map((coinName, i) => {
+ return (
+
+ );
+ })}
+
+ )}
+ {dataMode === 'MARGIN' && (
+ <>
+
+
+
+ )}
+
+
+
+
+
+
+ );
+}
diff --git a/components/home/charts/liquidity.tsx b/components/home/charts/liquidity.tsx
index 4ab0b4a..60a7abd 100644
--- a/components/home/charts/liquidity.tsx
+++ b/components/home/charts/liquidity.tsx
@@ -1,323 +1,326 @@
import {
- Bar,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
- ComposedChart,
- Line,
- LineChart
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+ Line,
+ LineChart,
} from 'recharts';
import { useEffect, useState } from 'react';
-import { Box, Text, useMediaQuery } from "@chakra-ui/react"
import { useRequest } from '@/hooks/useRequest';
import ChartWrapper from '../../common/chartWrapper';
+import { CHART_HEIGHT } from '../../../constants';
import {
- CHART_HEIGHT,
-} from "../../../constants";
-import {
- tooltipFormatter,
- tooltipLabelFormatter,
- xAxisFormatter,
- formatterPercent,
-
-} from '../../../helpers'
-import { getTokenHex } from "../../../constants/tokens";
-import {
- liquidity_by_coin,
-} from "../../../constants/api"
-
-type DailyUniqueUsersByCoin = {
- time: string;
- coin: string;
- daily_unique_users: number;
- percentage_of_total_users: number;
- all: number;
-};
-
-type UniqueUserTradeData = {
- time: string;
- daily_unique_users: number;
-};
-
-type CumulativeNewUsersData = {
- time: string;
- daily_new_users: number;
- cumulative_new_users: number;
-};
-
-type GroupedTradeData = {
- time: Date;
- all: number;
- daily_unique_users: number;
- cumulative_unique_users: number;
- unit: string;
- [key: string]: number | Date | { [key: string]: number } | string | undefined;
-}
-
-type TempGroupedTradeData = {
- time: Date;
- coins: { [key: string]: number };
- all: number;
- daily_unique_users: number;
- cumulative_unique_users: number;
- unit: string;
- [key: string]: number | Date | { [key: string]: number } | string | undefined;
-}
-
-const REQUESTS = [
- liquidity_by_coin
-];
-
-export default function CumulativeUsers() {
- const [isMobile] = useMediaQuery('(max-width: 700px)');
-
- const [formattedData0, setFormattedData0] = useState([])
- const [formattedData1000, setFormattedData1000] = useState([])
- const [formattedData3000, setFormattedData3000] = useState([])
- const [formattedData10000, setFormattedData10000] = useState([])
- const [minMax, setMinMax] = useState()
-
- const [coinKeys0, setCoinKeys0] = useState([])
- const [coinKeys1000, setCoinKeys1000] = useState([])
- const [coinKeys3000, setCoinKeys3000] = useState([])
- const [coinKeys10000, setCoinKeys10000] = useState([])
-
-
- const [dataMode, setDataMode] = useState<'0' | '1000' | '3000' | '10000'>('0')
-
- const [dataLiqudity, loadingLiqudity, errorLiqudity] = useRequest(REQUESTS[0], [], 'chart_data');
- const loading = loadingLiqudity;
- const error = errorLiqudity;
-
- const controls = {
- toggles: [
- {
- text: "Half Spread",
- event: () => setDataMode('0'),
- active: dataMode === '0',
- },
- {
- text: "$1k",
- event: () => setDataMode('1000'),
- active: dataMode === '1000',
- },
- {
- text: "$3k",
- event: () => setDataMode('3000'),
- active: dataMode === '3000',
- },
- {
- text: "$10k",
- event: () => setDataMode('10000'),
- active: dataMode === '10000',
- }
- ]
+ tooltipFormatter,
+ xAxisFormatter,
+ formatterPercent,
+ tooltipFormatterDate,
+} from '../../../helpers';
+import { createCoinSelectors } from '../../../helpers/utils';
+
+import { getTokenColor, initialTokensSelected } from '../../../constants/tokens';
+import { liquidity_by_coin } from '../../../constants/api';
+import { Box, Text } from '@chakra-ui/react';
+
+const REQUESTS = [liquidity_by_coin];
+
+export default function Liquidity() {
+ const [formattedData0, setFormattedData0] = useState([]);
+ const [formattedData1000, setFormattedData1000] = useState([]);
+ const [formattedData10000, setFormattedData10000] = useState([]);
+ const [formattedData30000, setFormattedData30000] = useState([]);
+ const [formattedData100000, setFormattedData100000] = useState([]);
+
+ const [coinKeys, setCoinKeys] = useState([]);
+ const [coinKeys0, setCoinKeys0] = useState([]);
+ const [coinKeys1000, setCoinKeys1000] = useState([]);
+ const [coinKeys10000, setCoinKeys10000] = useState([]);
+ const [coinKeys30000, setCoinKeys30000] = useState([]);
+ const [coinKeys100000, setCoinKeys100000] = useState([]);
+
+ const [dataMode, setDataMode] = useState<'0' | '1000' | '10000' | '30000' | '100000'>('0');
+ const [coinsSelected, setCoinsSelected] = useState(initialTokensSelected);
+
+ const [dataLiqudity, loadingLiqudity, errorLiqudity] = useRequest(REQUESTS[0], [], 'chart_data');
+ const loading = loadingLiqudity;
+ const error = errorLiqudity;
+
+ const controls = {
+ toggles: [
+ {
+ text: 'Half Spread',
+ event: () => setDataMode('0'),
+ active: dataMode === '0',
+ },
+ {
+ text: '$1k',
+ event: () => setDataMode('1000'),
+ active: dataMode === '1000',
+ },
+ {
+ text: '$10k',
+ event: () => setDataMode('10000'),
+ active: dataMode === '10000',
+ },
+ {
+ text: '$30k',
+ event: () => setDataMode('30000'),
+ active: dataMode === '30000',
+ },
+ {
+ text: '$100k',
+ event: () => setDataMode('100000'),
+ active: dataMode === '100000',
+ },
+ ],
+ };
+
+ type InputData = {
+ [key: string]: {
+ median_slippage_0: number;
+ median_slippage_1000: number;
+ median_slippage_10000: number;
+ median_slippage_30000: number;
+ median_slippage_100000: number;
+ time: string;
+ }[];
+ };
+
+ type OutputData = {
+ median_slippage_0: { time: Date; [key: string]: number | Date | string }[];
+ median_slippage_1000: { time: Date; [key: string]: number | Date | string }[];
+ median_slippage_10000: { time: Date; [key: string]: number | Date | string }[];
+ median_slippage_30000: { time: Date; [key: string]: number | Date | string }[];
+ median_slippage_100000: { time: Date; [key: string]: number | Date | string }[];
+ };
+
+ const extractCoins = (data: InputData): string[] => {
+ let coins = [];
+ for (let coin of Object.keys(data)) {
+ coins.push(coin);
+ }
+ return coins;
+ };
+
+ const transformData = (data: InputData): OutputData => {
+ // Filter data for each category by top 10 coins
+ const filteredData: InputData = {};
+ for (let coin of coinsSelected) {
+ if (coinsSelected.includes(coin)) {
+ filteredData[coin] = data[coin];
+ }
}
- type InputData = {
- [key: string]: {
- median_slippage_0: number,
- median_slippage_1000: number,
- median_slippage_3000: number,
- median_slippage_10000: number,
- time: string
- }[]
- };
-
- type OutputData = {
- median_slippage_0: { time: Date, [key: string]: number | Date | string }[],
- median_slippage_1000: { time: Date, [key: string]: number | Date | string }[],
- median_slippage_3000: { time: Date, [key: string]: number | Date | string }[],
- median_slippage_10000: { time: Date, [key: string]: number | Date | string }[],
- };
-
- const transformData = (data: InputData): OutputData => {
- const coinTotals = new Map();
-
- const minMax: { min: number; max: number } = { min: Infinity, max: -Infinity };
-
- // Compute overall totals for each coin
- for (let key in data) {
- data[key].forEach((record) => {
- coinTotals.set(key, (coinTotals.get(key) || 0) + record.median_slippage_1000 + record.median_slippage_3000 + record.median_slippage_10000);
- });
- }
-
- // Get the top 10 coins by total over the whole time period
- const topCoins = Array.from(coinTotals.entries())
- .sort((a, b) => b[1] - a[1])
- .slice(0, 10)
- .map(([coin]) => coin);
-
- // Filter data for each category by top 10 coins
- const filteredData: InputData = {};
- for (let coin of topCoins) {
- filteredData[coin] = data[coin];
- }
-
- const median_slippage_0 = new Map();
- const median_slippage_1000 = new Map();
- const median_slippage_3000 = new Map();
- const median_slippage_10000 = new Map();
-
- for (let key in filteredData) {
- filteredData[key].forEach((record) => {
- const { time, median_slippage_0: val_0, median_slippage_1000: val_1000, median_slippage_3000: val_3000, median_slippage_10000: val_10000 } = record;
-
- const map0 = median_slippage_0.get(time) || { time: new Date(time), unit: "%" };
- const map1000 = median_slippage_1000.get(time) || { time: new Date(time), unit: "%" };
- const map3000 = median_slippage_3000.get(time) || { time: new Date(time), unit: "%" };
- const map10000 = median_slippage_10000.get(time) || { time: new Date(time), unit: "%" };
-
- map0[key] = val_0 * 100;
- map1000[key] = val_1000 * 100;
- map3000[key] = val_3000 * 100;
- map10000[key] = val_10000 * 100;
-
- median_slippage_0.set(time, map0);
- median_slippage_1000.set(time, map1000);
- median_slippage_3000.set(time, map3000);
- median_slippage_10000.set(time, map10000);
- });
- }
-
- return {
- median_slippage_0: Array.from(median_slippage_0.values()),
- median_slippage_1000: Array.from(median_slippage_1000.values()),
- median_slippage_3000: Array.from(median_slippage_3000.values()),
- median_slippage_10000: Array.from(median_slippage_10000.values())
- };
- };
-
- type MinMaxValues = {
- min: number;
- max: number;
- };
-
- const getMinMaxValues = (data: any): MinMaxValues => {
- let min = Infinity;
- let max = -Infinity;
- for (let prop in data) {
- if (Object.prototype.hasOwnProperty.call(data, prop)) {
- const propData = data[prop];
- propData.forEach((item: any) => {
- for (let key in item) {
- if (key !== 'time' && typeof item[key] === 'number') {
- const value = item[key] as number;
- min = Math.min(min, value);
- max = Math.max(max, value);
- }
- }
- });
- }
- }
- return { min, max };
- };
-
+ const median_slippage_0 = new Map<
+ string,
+ { time: Date; [key: string]: number | Date | string }
+ >();
+ const median_slippage_1000 = new Map<
+ string,
+ { time: Date; [key: string]: number | Date | string }
+ >();
+ const median_slippage_10000 = new Map<
+ string,
+ { time: Date; [key: string]: number | Date | string }
+ >();
+ const median_slippage_30000 = new Map<
+ string,
+ { time: Date; [key: string]: number | Date | string }
+ >();
+ const median_slippage_100000 = new Map<
+ string,
+ { time: Date; [key: string]: number | Date | string }
+ >();
+
+ for (let key in filteredData) {
+ if (!filteredData[key]) {
+ continue;
+ }
+ filteredData[key].forEach((record) => {
+ const {
+ time,
+ median_slippage_0: val_0,
+ median_slippage_1000: val_1000,
+ median_slippage_10000: val_10000,
+ median_slippage_30000: val_30000,
+ median_slippage_100000: val_100000,
+ } = record;
+
+ const map0 = median_slippage_0.get(time) || { time: new Date(time), unit: '%' };
+ const map1000 = median_slippage_1000.get(time) || { time: new Date(time), unit: '%' };
+ const map10000 = median_slippage_10000.get(time) || { time: new Date(time), unit: '%' };
+ const map30000 = median_slippage_30000.get(time) || { time: new Date(time), unit: '%' };
+ const map100000 = median_slippage_100000.get(time) || { time: new Date(time), unit: '%' };
+
+ map0[key] = val_0 * 100;
+ map1000[key] = val_1000 * 100;
+ map10000[key] = val_10000 * 100;
+ map30000[key] = val_30000 * 100;
+ map100000[key] = val_100000 * 100;
+
+ median_slippage_0.set(time, map0);
+ median_slippage_1000.set(time, map1000);
+ median_slippage_10000.set(time, map10000);
+ median_slippage_30000.set(time, map30000);
+ median_slippage_100000.set(time, map100000);
+ });
+ }
- const extractUniqueCoins = (data: OutputData['median_slippage_1000'] | OutputData['median_slippage_10000'] | OutputData['median_slippage_1000']): string[] => {
- const coinSet = new Set();
- data.forEach(record => {
- Object.keys(record).forEach(key => {
- if (key !== 'time' && key !== 'unit') {
- coinSet.add(key);
- }
- });
- });
- return Array.from(coinSet);
+ const sortByDate = (a: Date, b: Date) => {
+ return a.valueOf() - b.valueOf();
};
- const formatData = () => {
- const formattedData = transformData(dataLiqudity);
- setFormattedData0(formattedData.median_slippage_0)
- setFormattedData1000(formattedData.median_slippage_1000)
- setFormattedData3000(formattedData.median_slippage_3000)
- setFormattedData10000(formattedData.median_slippage_10000)
- const formattedUniqueCoinKeys0 = extractUniqueCoins(formattedData.median_slippage_0)
- const formattedUniqueCoinKeys1000 = extractUniqueCoins(formattedData.median_slippage_1000)
- const formattedUniqueCoinKeys3000 = extractUniqueCoins(formattedData.median_slippage_3000)
- const formattedUniqueCoinKeys10000 = extractUniqueCoins(formattedData.median_slippage_10000)
- const minMaxValues = getMinMaxValues(formattedData);
- setMinMax(minMaxValues);
- setCoinKeys0(formattedUniqueCoinKeys0)
- setCoinKeys1000(formattedUniqueCoinKeys1000)
- setCoinKeys3000(formattedUniqueCoinKeys3000)
- setCoinKeys10000(formattedUniqueCoinKeys10000)
+ return {
+ median_slippage_0: Array.from(median_slippage_0.values()).sort((a, b) =>
+ sortByDate(a.time, b.time)
+ ),
+ median_slippage_1000: Array.from(median_slippage_1000.values()).sort((a, b) =>
+ sortByDate(a.time, b.time)
+ ),
+ median_slippage_10000: Array.from(median_slippage_10000.values()).sort((a, b) =>
+ sortByDate(a.time, b.time)
+ ),
+ median_slippage_30000: Array.from(median_slippage_30000.values()).sort((a, b) =>
+ sortByDate(a.time, b.time)
+ ),
+ median_slippage_100000: Array.from(median_slippage_100000.values()).sort((a, b) =>
+ sortByDate(a.time, b.time)
+ ),
};
-
- useEffect(() => {
- if (!loading && !error) {
- formatData();
+ };
+
+ const extractUniqueCoins = (
+ data: OutputData['median_slippage_1000'] | OutputData['median_slippage_10000']
+ ): string[] => {
+ const coinSet = new Set();
+ data.forEach((record) => {
+ Object.keys(record).forEach((key) => {
+ if (key !== 'time' && key !== 'unit') {
+ coinSet.add(key);
}
- }, [loading])
-
- const chartData = dataMode === '0' ? formattedData0 : dataMode === '1000' ? formattedData1000 : dataMode === '3000' ? formattedData3000 : formattedData10000;
-
- const chartDataCoinKeys = dataMode === '0' ? coinKeys0 : dataMode === '1000' ? coinKeys1000 : dataMode === '3000' ? coinKeys3000 : coinKeys10000;
-
- return (
-
-
-
-
-
-
- {
- return Number(item.value) * -1;
- }}
- />
-
- {
- chartDataCoinKeys.map(((coinName, i) => {
- return (
-
- )
- }))
- }
-
-
-
- Top 10 Coins over time
-
-
- )
-}
\ No newline at end of file
+ });
+ });
+ return Array.from(coinSet);
+ };
+
+ const formatData = () => {
+ const extractedCoinKeys = extractCoins(dataLiqudity);
+ setCoinKeys(extractedCoinKeys);
+ const formattedData = transformData(dataLiqudity);
+ setFormattedData0(formattedData.median_slippage_0);
+ setFormattedData1000(formattedData.median_slippage_1000);
+ setFormattedData10000(formattedData.median_slippage_10000);
+ setFormattedData30000(formattedData.median_slippage_30000);
+ setFormattedData100000(formattedData.median_slippage_100000);
+
+ const formattedUniqueCoinKeys0 = extractUniqueCoins(formattedData.median_slippage_0);
+ const formattedUniqueCoinKeys1000 = extractUniqueCoins(formattedData.median_slippage_1000);
+ const formattedUniqueCoinKeys10000 = extractUniqueCoins(formattedData.median_slippage_10000);
+ const formattedUniqueCoinKeys30000 = extractUniqueCoins(formattedData.median_slippage_30000);
+ const formattedUniqueCoinKeys100000 = extractUniqueCoins(formattedData.median_slippage_100000);
+
+ setCoinKeys0(formattedUniqueCoinKeys0);
+ setCoinKeys1000(formattedUniqueCoinKeys1000);
+ setCoinKeys10000(formattedUniqueCoinKeys10000);
+ setCoinKeys30000(formattedUniqueCoinKeys30000);
+ setCoinKeys100000(formattedUniqueCoinKeys100000);
+ };
+
+ useEffect(() => {
+ if (!loading && !error) {
+ formatData();
+ }
+ }, [loading, coinKeys]);
+
+ let chartData;
+ let chartDataCoinKeys;
+ switch (dataMode) {
+ case '0':
+ chartData = formattedData0;
+ chartDataCoinKeys = coinKeys0;
+ break;
+ case '1000':
+ chartData = formattedData1000;
+ chartDataCoinKeys = coinKeys1000;
+ break;
+ case '10000':
+ chartData = formattedData10000;
+ chartDataCoinKeys = coinKeys10000;
+ break;
+ case '30000':
+ chartData = formattedData30000;
+ chartDataCoinKeys = coinKeys30000;
+ break;
+ case '100000':
+ chartData = formattedData100000;
+ chartDataCoinKeys = coinKeys100000;
+ break;
+ }
+
+ const coinSelectors = createCoinSelectors(
+ coinKeys,
+ coinsSelected,
+ setCoinsSelected,
+ formatData,
+ true
+ );
+
+ return (
+
+
+
+
+
+
+ {
+ return Number(item.value);
+ }}
+ />
+
+ {coinsSelected.map((coinName, i) => {
+ return (
+
+ );
+ })}
+
+
+
+ Slippage percentage by trade size.
+
+
+ );
+}
diff --git a/components/home/charts/open-interest.tsx b/components/home/charts/open-interest.tsx
index 9a1a021..9c12323 100644
--- a/components/home/charts/open-interest.tsx
+++ b/components/home/charts/open-interest.tsx
@@ -1,193 +1,171 @@
import {
- Bar,
- Label,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- LineChart,
- ResponsiveContainer,
- ComposedChart,
- Line
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ LineChart,
+ ResponsiveContainer,
+ Line,
} from 'recharts';
import { useEffect, useState } from 'react';
-import { Box, Text, useMediaQuery } from "@chakra-ui/react"
+import { Box, Text } from '@chakra-ui/react';
import { useRequest } from '@/hooks/useRequest';
import ChartWrapper from '../../common/chartWrapper';
+import { BRIGHT_GREEN, CHART_HEIGHT, YAXIS_WIDTH } from '../../../constants';
import {
- CHART_HEIGHT,
- YAXIS_WIDTH,
-} from "../../../constants";
-import {
- xAxisFormatter,
- tooltipLabelFormatter,
- yaxisFormatter,
- tooltipFormatterCurrency,
-} from '../../../helpers'
-import { getTokenHex } from "../../../constants/tokens";
-import {
- open_interest,
-
-} from "../../../constants/api"
-
-type OpenInterestData = { time: string; coin: string; open_interest: number };
-
-type GroupedOpenInterestData = { time: string;[key: string]: number | string };
-
-const REQUESTS = [
- open_interest
-];
-
-export default function VolumeChart() {
- const [isMobile] = useMediaQuery('(max-width: 700px)');
-
- const [coinKeys, setCoinKeys] = useState([])
- const [formattedData, setFormattedData] = useState([])
- const [dataOpenInterest, loadingOpenInterest, errorOpenInterest] = useRequest(REQUESTS[0], [], 'chart_data');
-
- const loading = loadingOpenInterest;
- const error = errorOpenInterest;
-
- type OpenInterestData = { time: string; coin: string; open_interest: number };
- type GroupedOpenInterestData = { time: Date; unit: string; all: number;[key: string]: number | Date | string };
-
- const groupByTime = (data: OpenInterestData[]): GroupedOpenInterestData[] => {
- const map = new Map();
- const totalOpenInterestMap = new Map();
-
- data.forEach((item) => {
- const key = item.time;
- if (!map.has(key)) {
- map.set(key, {
- time: new Date(key),
- Other: 0, // Initialize the 'Other' property
- all: 0, // Initialize the 'all' property
- unit: "$", // Initialize the 'unit' property
- });
- }
- const existingEntry = map.get(key);
- existingEntry[item.coin] = (existingEntry[item.coin] || 0) + item.open_interest;
- existingEntry.all += item.open_interest; // Aggregate total open interest for 'all' property
-
- // Aggregate total open interest for each coin
- totalOpenInterestMap.set(item.coin, (totalOpenInterestMap.get(item.coin) || 0) + item.open_interest);
- });
-
- // Get top 10 coins by total open interest
- const top10Coins = Array.from(totalOpenInterestMap.entries())
- .sort(([, a], [, b]) => b - a)
- .slice(0, 10)
- .map(([coin]) => coin);
-
- // Filter out the coins that are not in the top 10 and calculate 'Other'
- return Array.from(map.values()).map((record: any) => {
- let otherSum = 0;
- Object.keys(record).forEach((coin) => {
- if (coin !== 'time' && coin !== 'unit' && coin !== 'all' && !top10Coins.includes(coin)) { // Exclude 'unit' and 'all' from calculations
- otherSum += record[coin];
- delete record[coin];
- }
- });
- record.Other = otherSum; // Update 'Other' property with sum of other coins
- return record as GroupedOpenInterestData;
+ xAxisFormatter,
+ yaxisFormatter,
+ tooltipFormatterCurrency,
+ tooltipFormatterDate,
+} from '../../../helpers';
+
+import { getTokenColor, initialTokensSelectedWithOther } from '../../../constants/tokens';
+import { open_interest } from '../../../constants/api';
+import { createCoinSelectors } from '@/helpers/utils';
+
+const REQUESTS = [open_interest];
+
+export default function OpenInterestChart() {
+ const [coins, setCoins] = useState([]);
+ const initialTokensSelected = [...initialTokensSelectedWithOther, 'All'];
+ const [coinsSelected, setCoinsSelected] = useState(initialTokensSelected);
+
+ const [formattedData, setFormattedData] = useState([]);
+ const [dataOpenInterest, loadingOpenInterest, errorOpenInterest] = useRequest(
+ REQUESTS[0],
+ [],
+ 'chart_data'
+ );
+
+ const loading = loadingOpenInterest;
+ const error = errorOpenInterest;
+
+ type OpenInterestData = { time: string; coin: string; open_interest: number };
+ type GroupedOpenInterestData = {
+ time: Date;
+ unit: string;
+ All: number;
+ [key: string]: number | Date | string;
+ };
+
+ const groupByTime = (data: OpenInterestData[]): [GroupedOpenInterestData[], string[]] => {
+ const map = new Map();
+ const totalOpenInterestMap = new Map();
+ const uniqueCoins = new Set();
+
+ data.forEach((item) => {
+ const key = item.time;
+ if (!map.has(key)) {
+ map.set(key, {
+ time: new Date(key),
+ All: 0,
+ unit: '$',
});
- };
-
- const extractUniqueCoins = (formattedVolumeData: GroupedOpenInterestData[]): string[] => {
- const coinSet = new Set();
- for (const data of formattedVolumeData) {
- Object.keys(data).forEach(coin => {
- if (coin !== 'all' &&
- coin !== 'time' &&
- coin !== 'unit'
- ) {
- coinSet.add(coin);
- }
- });
- }
- const coinsArray = Array.from(coinSet);
- if (coinsArray.includes('Other')) {
- const index = coinsArray.indexOf('Other');
- coinsArray.splice(index, 1);
- coinsArray.push('Other');
- }
- return coinsArray;
- };
-
- const formatData = () => {
- const groupedData = groupByTime(dataOpenInterest);
- const uniquieCoins = extractUniqueCoins(groupedData);
- setFormattedData(groupedData);
- setCoinKeys(uniquieCoins);
+ }
+ const existingEntry = map.get(key);
+ existingEntry[item.coin] = (existingEntry[item.coin] || 0) + item.open_interest;
+ existingEntry.All += item.open_interest;
+
+ totalOpenInterestMap.set(
+ item.coin,
+ (totalOpenInterestMap.get(item.coin) || 0) + item.open_interest
+ );
+ });
+
+ map.forEach((entry) => {
+ const coinEntries = Object.entries(entry).filter(
+ ([key]) =>
+ key !== 'time' &&
+ key !== 'total' &&
+ key !== 'cumulative' &&
+ key !== 'other' &&
+ key !== 'unit' &&
+ key !== 'Other'
+ );
+ coinEntries.forEach(([coin]) => uniqueCoins.add(coin));
+ });
+ const result = Array.from(map.values());
+ return [result, Array.from(uniqueCoins)];
+ };
+
+ const formatData = () => {
+ const [groupedData, coins] = groupByTime(dataOpenInterest);
+ setCoins(coins);
+ setFormattedData(groupedData);
+ };
+
+ useEffect(() => {
+ if (!loading && !error) {
+ formatData();
}
-
- useEffect(() => {
- if (!loading && !error) {
- formatData();
- }
- }, [loading])
-
- return (
-
-
-
-
-
-
- {
- return Number(item.value) * -1;
- }}
- />
-
- {
- coinKeys.map(((coinName, i) => {
- return (
-
- )
- }))
- }
-
-
-
- Top 10 Coins grouped by total volume over time and remaining coins grouped by Other
-
-
- )
-}
\ No newline at end of file
+ }, [loading]);
+
+ const coinSelectors = createCoinSelectors(
+ coins,
+ coinsSelected,
+ setCoinsSelected,
+ formatData,
+ true,
+ 'All'
+ );
+
+ return (
+
+
+
+
+
+
+ {
+ return Number(item.value) * -1;
+ }}
+ />
+
+ {coinsSelected.map((coinName, i) => {
+ return (
+
+ );
+ })}
+
+
+
+
+ Before March 22, 2024, this showed one-sided open interest. It now shows two-sided open interest to address user confusion.
+
+
+
+ );
+}
diff --git a/components/home/charts/retail-volume.tsx b/components/home/charts/retail-volume.tsx
new file mode 100644
index 0000000..8f5f8ed
--- /dev/null
+++ b/components/home/charts/retail-volume.tsx
@@ -0,0 +1,370 @@
+import {
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+ ComposedChart,
+ Line,
+} from 'recharts';
+import { useEffect, useState } from 'react';
+import { Box, Text } from '@chakra-ui/react';
+import { useRequest } from '@/hooks/useRequest';
+import ChartWrapper from '../../common/chartWrapper';
+import {
+ CHART_HEIGHT,
+ YAXIS_WIDTH,
+ BRIGHT_GREEN,
+ BRAND_GREEN_2,
+ BRAND_GREEN_3,
+} from '../../../constants';
+import {
+ tooltipFormatterCurrency,
+ tooltipLabelFormatter,
+ yaxisFormatter,
+ xAxisFormatter,
+} from '../../../helpers';
+import { createCoinSelectors } from '../../../helpers/utils';
+
+import { getTokenColor, initialTokensSelectedWithOther } from '../../../constants/tokens';
+import {
+ cumulative_usd_volume,
+ daily_usd_volume,
+ daily_usd_volume_by_coin,
+ daily_usd_volume_by_crossed,
+ daily_usd_volume_by_user,
+} from '../../../constants/api';
+
+const REQUESTS = [
+ cumulative_usd_volume,
+ daily_usd_volume,
+ daily_usd_volume_by_coin,
+ daily_usd_volume_by_crossed,
+ daily_usd_volume_by_user,
+];
+
+export default function RetailVolumeChart() {
+ const [dataMode, setDataMode] = useState<'COINS' | 'MARGIN'>('COINS');
+ const [formattedDataCoins, setFormattedDataCoins] = useState([]);
+ const [formattedDataMargin, setFormattedDataMargin] = useState([]);
+ const [coinsSelected, setCoinsSelected] = useState(initialTokensSelectedWithOther);
+ const [coinKeys, setCoinKeys] = useState([]);
+ const [dataCumulativeUsdVolume, loadingCumulativeUsdVolume, errorCumulativeUsdVolume] =
+ useRequest(REQUESTS[0], [], 'chart_data');
+ const [dataDailyUsdVolume, loadingDailyUsdVolume, errorDailyUsdVolume] = useRequest(
+ REQUESTS[1],
+ [],
+ 'chart_data'
+ );
+ const [dataDailyUsdVolumeByCoin, loadingDailyUsdVolumeByCoin, errorDailyUsdVolumeByCoin] =
+ useRequest(REQUESTS[2], [], 'chart_data');
+ const [
+ dataDailyUsdVolumeByCrossed,
+ loadingDailyUsdVolumeByCrossed,
+ errorDailyUsdVolumeByCrossed,
+ ] = useRequest(REQUESTS[3], [], 'chart_data');
+ const [dataDailyUsdVolumeByUser, loadingDailyUsdVolumeByUser, errorDailyUsdVolumeByUser] =
+ useRequest(REQUESTS[4], [], 'chart_data');
+
+ const loading =
+ loadingCumulativeUsdVolume ||
+ loadingDailyUsdVolume ||
+ loadingDailyUsdVolumeByCoin ||
+ loadingDailyUsdVolumeByCrossed ||
+ loadingDailyUsdVolumeByUser;
+ const error =
+ errorCumulativeUsdVolume ||
+ errorDailyUsdVolume ||
+ errorDailyUsdVolumeByCoin ||
+ errorDailyUsdVolumeByCrossed ||
+ errorDailyUsdVolumeByUser;
+
+ type CumulativeVolumeData = { cumulative: number; time: string };
+
+ const formatCumulativeVolumeByTime = (
+ dataCumulativeUsdVolume: CumulativeVolumeData[]
+ ): { [key: string]: number } => {
+ const result: { [key: string]: number } = {};
+ for (const data of dataCumulativeUsdVolume) {
+ result[data.time] = data.cumulative;
+ }
+ return result;
+ };
+
+ type FormattedDailyVolumeData = { time: string; daily_usd_volume: number };
+
+ const formatDailyVolumeByTime = (
+ dataCumulativeUsdVolume: FormattedDailyVolumeData[]
+ ): { [key: string]: number } => {
+ const result: { [key: string]: number } = {};
+ for (const data of dataCumulativeUsdVolume) {
+ result[data.time] = data.daily_usd_volume;
+ }
+ return result;
+ };
+
+ type VolumeData = { coin: string; daily_usd_volume: number; time: string };
+ type FormattedVolumeData = any[]; //{ time: string, all: number, [coin: string]: number };
+
+ const formatVolumeByCoins = (
+ CoinsSelected: string[],
+ dataDailyUsdVolumeByCoin: VolumeData[]
+ ): FormattedVolumeData[] => {
+ const temp: { [key: string]: { all: number; [coin: string]: number } } = {};
+ const cumulativeByTime: { [key: string]: number } = {};
+ let runningSelectedCumulative = 0;
+ let runningTotalCumulative = 0;
+ for (const data of dataDailyUsdVolumeByCoin) {
+ if (!temp[data.time]) {
+ temp[data.time] = { all: 0, cumulative: 0 };
+ }
+ if (CoinsSelected.includes(data.coin) || CoinsSelected.includes('Other')) {
+ temp[data.time].all += data.daily_usd_volume;
+ runningSelectedCumulative += data.daily_usd_volume;
+ }
+ temp[data.time][data.coin] = data.daily_usd_volume;
+ runningTotalCumulative += data.daily_usd_volume;
+ cumulativeByTime[data.time] = runningSelectedCumulative;
+ }
+
+ const selectedCoinData = (obj: { [coin: string]: number }) => {
+ const selectedEntries = Object.entries(obj).filter(
+ ([coin]) => CoinsSelected.includes(coin) && coin !== 'all'
+ );
+ const otherEntries = Object.entries(obj).filter(
+ ([coin]) => !CoinsSelected.includes(coin) && coin !== 'all'
+ );
+ const otherVolume = otherEntries.reduce((total, [_, volume]) => total + volume, 0);
+ return {
+ ...Object.fromEntries(selectedEntries),
+ Other: otherVolume,
+ all: obj.all,
+ };
+ };
+
+ const result: any[] = Object.entries(temp).map(([time, volumes]) => {
+ const selectedVolumes = selectedCoinData(volumes);
+ const all =
+ CoinsSelected.length === 1 && CoinsSelected.includes('Other')
+ ? selectedVolumes.Other
+ : selectedVolumes.all;
+ return {
+ time: new Date(time),
+ ...selectedVolumes,
+ cumulative: cumulativeByTime[time],
+ all,
+ unit: '$',
+ };
+ });
+
+ return result;
+ };
+
+ const extractUniqueCoins = (formattedVolumeData: VolumeData[]): string[] => {
+ const coinSet = new Set();
+ for (const data of formattedVolumeData) {
+ coinSet.add(data.coin);
+ }
+ const coinsArray = ['Other', ...Array.from(coinSet)];
+ return coinsArray;
+ };
+
+ type VolumeCrossedData = { crossed: boolean; daily_usd_volume: number; time: string };
+
+ const formatVolumeByCrossed = (
+ dataDailyUsdVolumeByCrossed: VolumeCrossedData[],
+ formattedCumulativeUsdVolume: { [key: string]: number },
+ formattedDailyVolumeByTime: { [key: string]: number }
+ ): any[] => {
+ // Create a temporary object to collect the data
+ const temp: { [key: string]: any } = {};
+
+ for (const data of dataDailyUsdVolumeByCrossed) {
+ if (!temp[data.time]) {
+ temp[data.time] = { all: 0, maker: 0, taker: 0 };
+ }
+ // Assigning daily_usd_volume to 'maker' if crossed is true, else assign to 'taker'
+ if (data.crossed) {
+ temp[data.time].taker = data.daily_usd_volume;
+ } else {
+ temp[data.time].maker = data.daily_usd_volume;
+ }
+ temp[data.time].all += data.daily_usd_volume;
+ }
+ // Convert the collected data into an array
+ const result: any[] = Object.entries(temp).map((item: any) => {
+ return {
+ time: new Date(item[0]),
+ maker: item[1].maker || 0,
+ taker: item[1].taker || 0,
+ Cumulative: formattedCumulativeUsdVolume[item[0]],
+ all: formattedDailyVolumeByTime[item[0]],
+ unit: '$',
+ };
+ });
+ return result;
+ };
+
+ const formatData = (CoinsSelected: string[]) => {
+ const formattedCumulativeVolumeByTime = formatCumulativeVolumeByTime(dataCumulativeUsdVolume);
+ const formattedDailyVolumeByTime = formatDailyVolumeByTime(dataDailyUsdVolume);
+ const formattedVolumeByCoins = formatVolumeByCoins(CoinsSelected, dataDailyUsdVolumeByCoin);
+ const formattedVolumeByCrossed = formatVolumeByCrossed(
+ dataDailyUsdVolumeByCrossed,
+ formattedCumulativeVolumeByTime,
+ formattedDailyVolumeByTime
+ );
+ setCoinKeys(extractUniqueCoins(dataDailyUsdVolumeByCoin));
+ setFormattedDataCoins(formattedVolumeByCoins);
+ setFormattedDataMargin(formattedVolumeByCrossed);
+ };
+
+ const controls = {
+ toggles: [
+ {
+ text: 'Coins',
+ event: () => setDataMode('COINS'),
+ active: dataMode === 'COINS',
+ },
+ {
+ text: 'Maker / Taker',
+ event: () => setDataMode('MARGIN'),
+ active: dataMode === 'MARGIN',
+ },
+ ],
+ };
+
+ useEffect(() => {
+ if (!loading || error) {
+ formatData(coinsSelected);
+ }
+ }, [loading, error]);
+
+ const coinSelectors = createCoinSelectors(
+ coinKeys,
+ coinsSelected,
+ setCoinsSelected,
+ formatData,
+ false,
+ 'Other'
+ );
+ return (
+
+
+
+
+
+
+ {
+ return Number(item.value) * -1;
+ }}
+ />
+
+ {dataMode === 'COINS' && (
+ <>
+ {coinsSelected.map((coinName, i) => {
+ return (
+
+ );
+ })}
+
+ )}
+ {dataMode === 'MARGIN' && (
+ <>
+
+
+
+ )}
+
+
+
+
+
+
+ This measures two-sided volume, i.e. each side of a trade is counted once if that side is retail.
+ This previously tracked retail volume, but was changed in February 2024 to non-HLP volume.
+
+
+
+ );
+}
diff --git a/components/home/charts/top-stats.tsx b/components/home/charts/top-stats.tsx
index 14fdbf9..280e52e 100644
--- a/components/home/charts/top-stats.tsx
+++ b/components/home/charts/top-stats.tsx
@@ -1,97 +1,151 @@
-'use strict'
-import React from 'react';
+'use strict';
+import React, { useEffect, useState } from 'react';
import { Box, Grid, Text, Spinner } from '@chakra-ui/react';
-import { total_users, total_usd_volume, total_deposits, total_withdrawals, total_notional_liquidated } from "../../../constants/api"
+import {
+ total_users,
+ total_deposits,
+ total_withdrawals,
+ total_notional_liquidated,
+ total_volume,
+} from '../../../constants/api';
import { useRequest } from '@/hooks/useRequest';
import { formatNumber } from '@/utils/formatting';
const REQUESTS = [
- total_users,
- total_usd_volume,
- total_deposits,
- total_withdrawals,
- total_notional_liquidated,
+ total_users,
+ total_volume,
+ total_deposits,
+ total_withdrawals,
+ total_notional_liquidated,
];
-const Card = (props: any) => (
-
-);
+const Card = (props: any) => ;
-const Loader = () =>
+const Loader = () => (
+
+
+
+);
const TopStats = () => {
+ const [dataTotalUsers, loadingTotalUsers, errorTotalUsers] = useRequest(
+ REQUESTS[0],
+ 0,
+ 'total_users',
+ true
+ );
+ const [dataTotalVolume, loadingVol, errorVol] = useRequest(REQUESTS[1], 0, 'chart_data', true);
+ const [totalVolume, setTotalVolume] = useState(0);
+ const [dataTotalDeposits, loadingTotalDeposits, errorTotalDeposits] = useRequest(
+ REQUESTS[2],
+ 0,
+ 'total_deposits',
+ true
+ );
+ const [dataTotalWithdrawals, loadingTotalWithdrawals, errorTotalWithdrawals] = useRequest(
+ REQUESTS[3],
+ 0,
+ 'total_withdrawals',
+ true
+ );
+ const [
+ dataTotalNotionalLiquidated,
+ loadingTotalNotionalLiquidated,
+ errorTotalNotionalLiquidated,
+ ] = useRequest(REQUESTS[4], 0, 'total_notional_liquidated', true);
+
+ interface TotalVolume {
+ time: string;
+ total_volume: number;
+ coin: string;
+ }
+
+ const computeTotalVolume = (dataTotalVolume: TotalVolume[]) => {
+ let totalVolume = 0;
+ dataTotalVolume.forEach((volume: TotalVolume) => {
+ totalVolume += volume.total_volume;
+ });
+
+ setTotalVolume(totalVolume);
+ };
- const [dataTotalUsers, loadingTotalUsers, errorTotalUsers] = useRequest(REQUESTS[0], 0, "total_users", true);
- const [dataTotalUsdVol, loadingUsdVol, errorUsdVol] = useRequest(REQUESTS[1], 0, "total_usd_volume", true);
- const [dataTotalDeposits, loadingTotalDeposits, errorTotalDeposits] = useRequest(REQUESTS[2], 0, "total_deposits", true);
- const [dataTotalWithdrawals, loadingTotalWithdrawals, errorTotalWithdrawals] = useRequest(REQUESTS[3], 0, "total_withdrawals", true);
- const [dataTotalNotionalLiquidated, loadingTotalNotionalLiquidated, errorTotalNotionalLiquidated] = useRequest(REQUESTS[4], 0, "total_notional_liquidated", true);
+ useEffect(() => {
+ if (!loadingVol && !errorVol && dataTotalVolume) {
+ computeTotalVolume(dataTotalVolume);
+ }
+ }, [loadingVol, errorVol]);
- return (
-
-
-
- {dataTotalUsers ? formatNumber(dataTotalUsers) : errorTotalUsers ? "Error" : null}
-
-
- Total Users
-
- {loadingTotalUsers && }
-
-
-
- {dataTotalUsdVol ? `$${formatNumber(dataTotalUsdVol, 0)}` : errorUsdVol ? "Error" : null}
-
-
- Total non-HLP Volume
-
- {loadingUsdVol && }
-
-
-
- {dataTotalDeposits ? `$${formatNumber(dataTotalDeposits, 0)}` : errorTotalDeposits ? "Error" : null}
-
-
- Total Deposits
-
- {loadingTotalDeposits && }
-
-
-
- {dataTotalWithdrawals ? `$${formatNumber(Math.abs(dataTotalWithdrawals), 0)}` : errorTotalWithdrawals ? "Error" : null}
-
-
- Total Withdrawals
-
- {loadingTotalWithdrawals && }
-
-
-
- {dataTotalNotionalLiquidated ? `$${formatNumber(dataTotalNotionalLiquidated, 0)}` : errorTotalNotionalLiquidated ? "Error" : null}
-
-
- Total Notional Liquidated
-
- {loadingTotalNotionalLiquidated && }
-
-
- );
+ return (
+
+
+
+ {dataTotalUsers ? formatNumber(dataTotalUsers) : errorTotalUsers ? 'Error' : null}
+
+
+ Total Users
+
+ {loadingTotalUsers && }
+
+
+
+ {totalVolume ? `$${formatNumber(totalVolume, 0)}` : errorVol ? 'Error' : null}
+
+
+ Total Volume
+
+ {loadingVol && }
+
+
+
+ {dataTotalDeposits
+ ? `$${formatNumber(dataTotalDeposits + 245601, 0)}`
+ : errorTotalDeposits
+ ? 'Error'
+ : null}
+
+
+ Total Deposits (All Time)
+
+ {loadingTotalDeposits && }
+
+
+
+ {dataTotalWithdrawals
+ ? `$${formatNumber(Math.abs(dataTotalWithdrawals), 0)}`
+ : errorTotalWithdrawals
+ ? 'Error'
+ : null}
+
+
+ Total Withdrawals (All Time)
+
+ {loadingTotalWithdrawals && }
+
+
+
+ {dataTotalNotionalLiquidated
+ ? `$${formatNumber(dataTotalNotionalLiquidated, 0)}`
+ : errorTotalNotionalLiquidated
+ ? 'Error'
+ : null}
+
+
+ Total Notional Liquidated
+
+ {loadingTotalNotionalLiquidated && }
+
+
+ );
};
export default TopStats;
diff --git a/components/home/charts/trader-profit.tsx b/components/home/charts/trader-profit.tsx
index 9d89b12..740a085 100644
--- a/components/home/charts/trader-profit.tsx
+++ b/components/home/charts/trader-profit.tsx
@@ -1,173 +1,167 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react';
import {
- Area,
- Bar,
- Cell,
- CartesianGrid,
- ComposedChart,
- Legend,
- Line,
- ResponsiveContainer,
- Tooltip,
- XAxis,
- YAxis
+ Bar,
+ Cell,
+ CartesianGrid,
+ ComposedChart,
+ Legend,
+ Line,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
} from 'recharts';
-import { chain, sumBy, sortBy, maxBy, minBy } from 'lodash'
+import { sortBy, maxBy, minBy } from 'lodash';
import { useRequest } from '@/hooks/useRequest';
-import { Box, Text, useMediaQuery } from "@chakra-ui/react"
-import { cumulative_user_pnl, user_pnl } from "../../../constants/api"
+import { Box, Text } from '@chakra-ui/react';
+import { cumulative_user_pnl, user_pnl } from '../../../constants/api';
import ChartWrapper from '../../common/chartWrapper';
+import { CHART_HEIGHT, YAXIS_WIDTH, BRIGHT_GREEN, GREEN, RED } from '../../../constants';
import {
- CHART_HEIGHT,
- YAXIS_WIDTH,
- BRIGHT_GREEN,
- GREEN,
- RED,
-} from "../../../constants";
-import {
- yaxisFormatter,
- xAxisFormatter,
- formatNumberWithOptions,
- tooltipFormatterCurrency,
-} from '../../../helpers'
+ yaxisFormatter,
+ xAxisFormatter,
+ tooltipFormatterCurrency,
+ tooltipFormatterDate,
+} from '../../../helpers';
-const REQUESTS = [
- cumulative_user_pnl,
- user_pnl,
-];
+const REQUESTS = [cumulative_user_pnl, user_pnl];
-export default function TradersProfitLossChart() {
- const [isMobile] = useMediaQuery('(max-width: 700px)');
+export default function TradersProfitLossChart(props: any) {
+ const isMobile = props.isMobile;
- const [data, setData] = useState(null);
- const [dataCumulativeUserPNL, loadingCumulativeUserPNL, errorCumulativeUserPNL] = useRequest(REQUESTS[0], [], 'chart_data');
- const [dataUserPNL, loadingUserPNL, errorUserPNL] = useRequest(REQUESTS[1], [], 'chart_data');
+ const [data, setData] = useState(null);
+ const [dataCumulativeUserPNL, loadingCumulativeUserPNL, errorCumulativeUserPNL] = useRequest(
+ REQUESTS[0],
+ [],
+ 'chart_data'
+ );
+ const [dataUserPNL, loadingUserPNL, errorUserPNL] = useRequest(REQUESTS[1], [], 'chart_data');
- const formatTradingData = () => {
- let currentPnlCumulative = 0;
- let currentProfitCumulative = 0;
- let currentLossCumulative = 0;
+ const loading = loadingUserPNL || loadingCumulativeUserPNL;
+ const error = errorUserPNL || errorCumulativeUserPNL;
+ const formatTradingData = () => {
+ let currentProfitCumulative = 0;
+ let currentLossCumulative = 0;
- dataUserPNL.shift();
- dataCumulativeUserPNL.shift();
+ dataUserPNL.shift();
+ dataCumulativeUserPNL.shift();
- if (!dataCumulativeUserPNL || !dataCumulativeUserPNL.length || !dataUserPNL || !dataUserPNL.length) return
+ if (
+ !dataCumulativeUserPNL ||
+ !dataCumulativeUserPNL.length ||
+ !dataUserPNL ||
+ !dataUserPNL.length
+ )
+ return;
- let data: any[] = sortBy(dataCumulativeUserPNL, (i: any) => Date.parse(i.time)).map((dataItem: any, index: number) => ({
- cumulative_pnl: dataItem.cumulative_pnl,
- user_pnl: dataUserPNL && dataUserPNL[index] ? dataUserPNL[index].total_pnl : 0,
- timestamp: new Date(dataItem.time),
- profit_cumulative: dataItem.cumulative_pnl > 0 ? dataItem.cumulative_pnl : 0,
- loss_cumulative: dataItem.cumulative_pnl < 0 ? dataItem.cumulative_pnl : 0,
- unit: "single",
- }));
+ let data: any[] = sortBy(dataCumulativeUserPNL, (i: any) => Date.parse(i.time)).map(
+ (dataItem: any, index: number) => ({
+ cumulative_pnl: dataItem.cumulative_pnl,
+ user_pnl: dataUserPNL && dataUserPNL[index] ? dataUserPNL[index].total_pnl : 0,
+ timestamp: new Date(dataItem.time),
+ profit_cumulative: dataItem.cumulative_pnl > 0 ? dataItem.cumulative_pnl : 0,
+ loss_cumulative: dataItem.cumulative_pnl < 0 ? dataItem.cumulative_pnl : 0,
+ unit: 'single',
+ })
+ );
- const maxProfit = maxBy(data, item => item.profit_cumulative).profit_cumulative
- const maxLoss = minBy(data, item => item.loss_cumulative).loss_cumulative
+ const maxProfit = maxBy(data, (item) => item.profit_cumulative).profit_cumulative;
+ const maxLoss = minBy(data, (item) => item.loss_cumulative).loss_cumulative;
- const maxPnl = maxBy(data, item => item.user_pnl).user_pnl;
- const minPnl = minBy(data, item => item.user_pnl).user_pnl;
+ const maxPnl = maxBy(data, (item) => item.user_pnl).user_pnl;
+ const minPnl = minBy(data, (item) => item.user_pnl).user_pnl;
- const maxCurrentCumulativePnl = maxBy(data, item => item.cumulative_pnl).cumulative_pnl;
- const minCurrentCumulativePnl = minBy(data, item => item.cumulative_pnl).cumulative_pnl;
+ const maxCurrentCumulativePnl = maxBy(data, (item) => item.cumulative_pnl).cumulative_pnl;
+ const minCurrentCumulativePnl = minBy(data, (item) => item.cumulative_pnl).cumulative_pnl;
- const stats = {
- maxProfit,
- maxLoss,
- currentProfitCumulative,
- currentLossCumulative,
- maxCurrentCumulativeProfitLoss: Math.max(currentProfitCumulative, -currentLossCumulative),
+ const stats = {
+ maxProfit,
+ maxLoss,
+ currentProfitCumulative,
+ currentLossCumulative,
+ maxCurrentCumulativeProfitLoss: Math.max(currentProfitCumulative, -currentLossCumulative),
- maxAbsPnl: Math.max(
- Math.abs(maxPnl),
- Math.abs(minPnl),
- ),
- maxAbsCumulativePnl: Math.max(
- Math.abs(maxCurrentCumulativePnl),
- Math.abs(minCurrentCumulativePnl)
- ),
- }
+ maxAbsPnl: Math.max(Math.abs(maxPnl), Math.abs(minPnl)),
+ maxAbsCumulativePnl: Math.max(
+ Math.abs(maxCurrentCumulativePnl),
+ Math.abs(minCurrentCumulativePnl)
+ ),
+ };
- setData({
- data,
- stats,
- })
- }
+ setData({
+ data,
+ stats,
+ });
+ };
- useEffect(() => {
- if (dataCumulativeUserPNL.length > 0 && dataUserPNL.length > 0) {
- formatTradingData();
- }
- }, [dataCumulativeUserPNL, dataUserPNL]);
+ useEffect(() => {
+ if (!loading && !error) {
+ formatTradingData();
+ }
+ }, [loading, error]);
- return (
-
-
-
-
-
-
-
- ''}
- contentStyle={{
- textAlign: 'left',
- background: "#0A1F1B",
- borderColor: "#061412",
- color: "#fff",
- boxShadow: "0px 0px 7px rgb(0 0 0 / 20%)",
- borderRadius: "26px",
- maxHeight: "500px"
- }}
- itemSorter={(item) => {
- return Number(item.value) * -1;
- }}
- />
-
-
- {(data && data.data || []).map((item: any, i: number) => {
- return 0 ? GREEN : RED} />
- })}
- maxBarSize={20}
- |
-
-
-
-
-
- This is computed as negative of (HLP + liquidator)
-
-
-
- )
-}
\ No newline at end of file
+ return (
+
+
+
+
+
+
+
+ {
+ return Number(item.value) * -1;
+ }}
+ />
+
+
+ {((data && data.data) || []).map((item: any, i: number) => {
+ return 0 ? GREEN : RED} />;
+ })}
+ |
+
+
+
+
+ This is computed as negative of (HLP + liquidator)
+
+
+ );
+}
diff --git a/components/home/charts/unique-users-coin.tsx b/components/home/charts/unique-users-coin.tsx
new file mode 100644
index 0000000..b32bffa
--- /dev/null
+++ b/components/home/charts/unique-users-coin.tsx
@@ -0,0 +1,268 @@
+import {
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+ ComposedChart,
+ Line,
+} from 'recharts';
+import { useEffect, useState } from 'react';
+import { Box, Text, useMediaQuery } from '@chakra-ui/react';
+import { useRequest } from '@/hooks/useRequest';
+
+import ChartWrapper, { CoinSelector } from '../../common/chartWrapper';
+import { CHART_HEIGHT, YAXIS_WIDTH, BRIGHT_GREEN } from '../../../constants';
+import {
+ tooltipFormatter,
+ tooltipFormatterDate,
+ xAxisFormatter,
+ yaxisFormatterNumber,
+ yaxisFormatterPercent,
+} from '../../../helpers';
+import { createCoinSelectors } from '../../../helpers/utils';
+
+import { getTokenColor, initialTokensSelectedWithOther } from '../../../constants/tokens';
+import {
+ cumulative_new_users,
+ daily_unique_users,
+ daily_unique_users_by_coin,
+} from '../../../constants/api';
+
+type DailyUniqueUsersByCoin = {
+ time: string;
+ coin: string;
+ daily_unique_users: number;
+ percentage_of_total_users: number;
+ all: number;
+};
+
+type UniqueUserTradeData = {
+ time: string;
+ daily_unique_users: number;
+};
+
+type CumulativeNewUsersData = {
+ time: string;
+ daily_new_users: number;
+ cumulative_new_users: number;
+};
+
+type GroupedTradeData = {
+ time: Date;
+ daily_unique_users: number;
+ cumulative_unique_users: number;
+ unit: string;
+ [key: string]: number | Date | { [key: string]: number } | string | undefined;
+};
+
+type TempGroupedTradeData = {
+ time: Date;
+ coins: { [key: string]: number };
+ //all: number;
+ daily_unique_users: number;
+ cumulative_unique_users: number;
+ unit: string;
+ [key: string]: number | Date | { [key: string]: number } | string | undefined;
+};
+
+const REQUESTS = [cumulative_new_users, daily_unique_users, daily_unique_users_by_coin];
+
+export default function UniqueUsers() {
+ const [coinsSelected, setCoinsSelected] = useState(initialTokensSelectedWithOther);
+
+ const [formattedData, setFormattedData] = useState([]);
+ const [coinKeys, setCoinKeys] = useState([]);
+
+ const [dataCumulativeNewUsers, loadingCumulativeNewUsers, errorCumulativeNewUsers] = useRequest(
+ REQUESTS[0],
+ [],
+ 'chart_data'
+ );
+ const [dataDailyUniqueUsers, loadingDailyUniqueUsers, errorDailyUniqueUsers] = useRequest(
+ REQUESTS[1],
+ [],
+ 'chart_data'
+ );
+ const [dataDailyUniqueUsersByCoin, loadingDailyUniqueUsersByCoin, errorDailyUniqueUsersByCoin] =
+ useRequest(REQUESTS[2], [], 'chart_data');
+
+ const loading =
+ loadingCumulativeNewUsers || loadingDailyUniqueUsers || loadingDailyUniqueUsersByCoin;
+ const error = errorCumulativeNewUsers || errorDailyUniqueUsers || errorDailyUniqueUsersByCoin;
+
+ const formatTradesByCoinAndTime = (
+ CoinsSelected: string[],
+ dataDailyUniqueUsersByCoin: DailyUniqueUsersByCoin[],
+ uniqueUserTradeData: UniqueUserTradeData[],
+ dataCumulativeNewUsers: CumulativeNewUsersData[]
+ ): GroupedTradeData[] => {
+ const temp: { [key: string]: TempGroupedTradeData } = {};
+ const uniqueUserTradeDataMap: { [key: string]: number } = {};
+ const cumulativeUniqueUserTradeDataMap: { [key: string]: number } = {};
+
+ uniqueUserTradeData.forEach((item) => {
+ uniqueUserTradeDataMap[item.time] = item.daily_unique_users;
+ });
+
+ dataCumulativeNewUsers.forEach((item) => {
+ cumulativeUniqueUserTradeDataMap[item.time] = item.cumulative_new_users;
+ });
+
+ dataDailyUniqueUsersByCoin.forEach(
+ ({ time, coin, daily_unique_users, percentage_of_total_users }) => {
+ if (!temp[time]) {
+ temp[time] = {
+ time: new Date(time),
+ coins: {},
+ daily_unique_users: uniqueUserTradeDataMap[time] || 0,
+ cumulative_unique_users: cumulativeUniqueUserTradeDataMap[time] || 0,
+ unit: '%',
+ };
+ }
+ temp[time].coins[coin] = (temp[time].coins[coin] || 0) + percentage_of_total_users * 100;
+ temp[time][`${coin}_daily_unique_users`] = daily_unique_users;
+ }
+ );
+
+ const selectedCoinData = (obj: { [coin: string]: number }) => {
+ const selectedEntries = Object.entries(obj).filter(
+ ([coin]) => CoinsSelected.includes(coin) || coin === 'all'
+ );
+ const otherEntries = Object.entries(obj).filter(
+ ([coin]) => !CoinsSelected.includes(coin) && coin !== 'all'
+ );
+ const otherVolume = otherEntries.reduce((total, [, volume]) => total + volume, 0);
+ return {
+ ...Object.fromEntries(selectedEntries),
+ Other: otherVolume,
+ };
+ };
+
+ return Object.values(temp).map(({ time, coins, ...rest }) => {
+ return {
+ time: new Date(time),
+ ...selectedCoinData(coins),
+ ...rest,
+ unit: '%',
+ };
+ });
+ };
+
+ const extractUniqueCoins = (CoinData: any): string[] => {
+ const coinSet = new Set();
+ for (const data of CoinData) {
+ coinSet.add(data.coin);
+ }
+ const coinsArray = Array.from(coinSet);
+ return coinsArray;
+ };
+
+ const formatData = (CoinsSelector: string[]) => {
+ const formattedData = formatTradesByCoinAndTime(
+ CoinsSelector,
+ dataDailyUniqueUsersByCoin,
+ dataDailyUniqueUsers,
+ dataCumulativeNewUsers
+ );
+ const formattedUniqueCoinKeys = extractUniqueCoins(dataDailyUniqueUsersByCoin);
+ setFormattedData(formattedData);
+ setCoinKeys(formattedUniqueCoinKeys);
+ };
+
+ useEffect(() => {
+ if (!loading && !error) {
+ formatData(coinsSelected);
+ }
+ }, [loading]);
+
+ const coinSelectors = createCoinSelectors(coinKeys, coinsSelected, setCoinsSelected, formatData);
+
+ return (
+
+
+
+
+
+
+
+ {
+ return Number(item.value) * -1;
+ }}
+ />
+
+ {coinsSelected.map((coinName, i) => {
+ return (
+
+ );
+ })}
+
+
+
+
+
+ The line is the number of unique addresses who traded on Hyperliquid each day, bars represent
+ proportion of users who traded specific coins. Total exceeds 100% as users can trade
+ multiple coins.
+
+
+
+ );
+}
diff --git a/components/home/charts/uniquie-users-coin.tsx b/components/home/charts/uniquie-users-coin.tsx
deleted file mode 100644
index 3c192b3..0000000
--- a/components/home/charts/uniquie-users-coin.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import {
- Bar,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
- ComposedChart,
- Line
-} from 'recharts';
-import { useEffect, useState } from 'react';
-import { Box, Text, useMediaQuery } from "@chakra-ui/react"
-import { useRequest } from '@/hooks/useRequest';
-import ChartWrapper from '../../common/chartWrapper';
-import {
- CHART_HEIGHT,
- YAXIS_WIDTH,
- BRIGHT_GREEN,
-} from "../../../constants";
-import {
- tooltipFormatter,
- tooltipLabelFormatter,
- xAxisFormatter,
- yaxisFormatterNumber,
- yaxisFormatterPercent,
-} from '../../../helpers'
-import { getTokenHex } from "../../../constants/tokens";
-import {
- cumulative_new_users,
- daily_unique_users,
- daily_unique_users_by_coin,
-} from "../../../constants/api"
-
-type DailyUniqueUsersByCoin = {
- time: string;
- coin: string;
- daily_unique_users: number;
- percentage_of_total_users: number;
- all: number;
-};
-
-type UniqueUserTradeData = {
- time: string;
- daily_unique_users: number;
-};
-
-type CumulativeNewUsersData = {
- time: string;
- daily_new_users: number;
- cumulative_new_users: number;
-};
-
-type GroupedTradeData = {
- time: Date;
- daily_unique_users: number;
- cumulative_unique_users: number;
- unit: string;
- [key: string]: number | Date | { [key: string]: number } | string | undefined;
-}
-
-type TempGroupedTradeData = {
- time: Date;
- coins: { [key: string]: number };
- //all: number;
- daily_unique_users: number;
- cumulative_unique_users: number;
- unit: string;
- [key: string]: number | Date | { [key: string]: number } | string | undefined;
-}
-
-const REQUESTS = [
- cumulative_new_users,
- daily_unique_users,
- daily_unique_users_by_coin,
-];
-
-export default function CumulativeUsers() {
- const [isMobile] = useMediaQuery('(max-width: 700px)');
-
- const [formattedData, setFormattedData] = useState([])
- const [coinKeys, setCoinKeys] = useState([])
-
- const [dataCumulativeNewUsers, loadingCumulativeNewUsers, errorCumulativeNewUsers] = useRequest(REQUESTS[0], [], 'chart_data');
- const [dataDailyUniqueUsers, loadingDailyUniqueUsers, errorDailyUniqueUsers] = useRequest(REQUESTS[1], [], 'chart_data');
- const [dataDailyUniqueUsersByCoin, loadingDailyUniqueUsersByCoin, errorDailyUniqueUsersByCoin] = useRequest(REQUESTS[2], [], 'chart_data');
-
- const loading = loadingCumulativeNewUsers || loadingDailyUniqueUsers || loadingDailyUniqueUsersByCoin;
- const error = errorCumulativeNewUsers || errorDailyUniqueUsers || errorDailyUniqueUsersByCoin;
-
- const formatTradesByCoinAndTime = (
- dataDailyUniqueUsersByCoin: DailyUniqueUsersByCoin[],
- uniqueUserTradeData: UniqueUserTradeData[],
- dataCumulativeNewUsers: CumulativeNewUsersData[]
- ): GroupedTradeData[] => {
- const temp: { [key: string]: TempGroupedTradeData } = {};
- const uniqueUserTradeDataMap: { [key: string]: number } = {};
- const cumulativeUniqueUserTradeDataMap: { [key: string]: number } = {};
-
- uniqueUserTradeData.forEach(item => {
- uniqueUserTradeDataMap[item.time] = item.daily_unique_users;
- });
-
- dataCumulativeNewUsers.forEach(item => {
- cumulativeUniqueUserTradeDataMap[item.time] = item.cumulative_new_users;
- });
-
- dataDailyUniqueUsersByCoin.forEach(({ time, coin, daily_unique_users, percentage_of_total_users }) => {
- if (!temp[time]) {
- temp[time] = {
- time: new Date(time),
- coins: {},
- daily_unique_users: uniqueUserTradeDataMap[time] || 0,
- cumulative_unique_users: cumulativeUniqueUserTradeDataMap[time] || 0,
- unit: '%'
- };
- }
- temp[time].coins[coin] = (temp[time].coins[coin] || 0) + (percentage_of_total_users * 100);
- temp[time][`${coin}_daily_unique_users`] = daily_unique_users;
- });
-
- const sortAndSliceTop10 = (obj: { [coin: string]: number }) => {
- const sortedEntries = Object.entries(obj)
- .sort(([, aVolume], [, bVolume]) => bVolume - aVolume);
- const top10Entries = sortedEntries.slice(0, 10);
- const otherEntries = sortedEntries.slice(10);
- const otherVolume = otherEntries.reduce((total, [, volume]) => total + volume, 0);
- return {
- ...Object.fromEntries(top10Entries),
- Other: otherVolume
- };
- };
-
- return Object.values(temp).map(({ time, coins, ...rest }) => {
- return {
- time: new Date(time),
- ...sortAndSliceTop10(coins),
- ...rest,
- unit: '%',
- };
- });
- }
-
- const extractUniqueCoins = (formattedVolumeData: GroupedTradeData[]): string[] => {
- const coinSet = new Set();
- for (const data of formattedVolumeData) {
- Object.keys(data).forEach(coin => {
- if (coin !== 'all' &&
- coin !== 'cumulative' &&
- coin !== 'time' &&
- coin !== 'other' &&
- coin !== 'unit' &&
- coin !== 'daily_unique_users' &&
- coin !== 'cumulative_unique_users' &&
- !coin.includes('daily_unique_users')
- ) {
- coinSet.add(coin);
- }
- });
- }
- const coinsArray = Array.from(coinSet);
- if (coinsArray.includes('Other')) {
- const index = coinsArray.indexOf('Other');
- coinsArray.splice(index, 1);
- coinsArray.push('Other');
- }
- return coinsArray;
- };
-
- const formatData = () => {
- const formattedData = formatTradesByCoinAndTime(dataDailyUniqueUsersByCoin, dataDailyUniqueUsers, dataCumulativeNewUsers);
- const formattedUniqueCoinKeys = extractUniqueCoins(formattedData)
- setFormattedData(formattedData);
- setCoinKeys(formattedUniqueCoinKeys)
- };
-
- useEffect(() => {
- if (!loading && !error) {
- formatData();
- }
- }, [loading])
-
- return (
-
-
-
-
-
-
-
- {
- return Number(item.value) * -1;
- }}
- />
-
- {
- coinKeys.map(((coinName, i) => {
- return (
-
- )
- }))
- }
-
-
-
-
-
- The line is the number of unique addresses who used Hyperliquid each day, bars represent proportion of users who traded specific coins. Total exceeds 100% as users can trade multiple coins. Top 10 coins are shown separately and the rest are grouped as Other.
-
-
-
- )
-}
\ No newline at end of file
diff --git a/components/home/charts/volume-non-hlp.tsx b/components/home/charts/volume-non-hlp.tsx
deleted file mode 100644
index a9f8936..0000000
--- a/components/home/charts/volume-non-hlp.tsx
+++ /dev/null
@@ -1,336 +0,0 @@
-import {
- Bar,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
- ComposedChart,
- Line
-} from 'recharts';
-import { useEffect, useState } from 'react';
-import { Box, Text, useMediaQuery } from "@chakra-ui/react"
-import { useRequest } from '@/hooks/useRequest';
-import ChartWrapper from '../../common/chartWrapper';
-import {
- CHART_HEIGHT,
- YAXIS_WIDTH,
- BRIGHT_GREEN,
- BRAND_GREEN_2,
- BRAND_GREEN_3,
-} from "../../../constants";
-import {
- tooltipFormatterCurrency,
- tooltipLabelFormatter,
- yaxisFormatter,
- xAxisFormatter,
-} from '../../../helpers'
-import { getTokenHex } from "../../../constants/tokens";
-import {
- cumulative_usd_volume,
- daily_usd_volume,
- daily_usd_volume_by_coin,
- daily_usd_volume_by_crossed,
- daily_usd_volume_by_user,
-} from "../../../constants/api"
-
-const REQUESTS = [
- cumulative_usd_volume,
- daily_usd_volume,
- daily_usd_volume_by_coin,
- daily_usd_volume_by_crossed,
- daily_usd_volume_by_user,
-];
-
-export default function VolumeChart() {
- const [isMobile] = useMediaQuery('(max-width: 700px)');
- const [dataMode, setDataMode] = useState<"COINS" | "MARGIN">('COINS');
- const [formattedDataCoins, setFormattedDataCoins] = useState([])
- const [formattedDataMarin, setFormattedDataMarin] = useState([])
- const [formattedCumulativeVolumeData, setFormattedCumulativeVolumeData] = useState([]);
- const [coinKeys, setCoinKeys] = useState([])
- const [dataCumulativeUsdVolume, loadingCumulativeUsdVolume, errorCumulativeUsdVolume] = useRequest(REQUESTS[0], [], 'chart_data');
- const [dataDailyUsdVolume, loadingDailyUsdVolume, errorDailyUsdVolume] = useRequest(REQUESTS[1], [], 'chart_data');
- const [dataDailyUsdVolumeByCoin, loadingDailyUsdVolumeByCoin, errorDailyUsdVolumeByCoin] = useRequest(REQUESTS[2], [], 'chart_data');
- const [dataDailyUsdVolumeByCrossed, loadingDailyUsdVolumeByCrossed, errorDailyUsdVolumeByCrossed] = useRequest(REQUESTS[3], [], 'chart_data');
- const [dataDailyUsdVolumeByUser, loadingDailyUsdVolumeByUser, errorDailyUsdVolumeByUser] = useRequest(REQUESTS[4], [], 'chart_data');
-
- const loading = loadingCumulativeUsdVolume || loadingDailyUsdVolume || loadingDailyUsdVolumeByCoin || loadingDailyUsdVolumeByCrossed || loadingDailyUsdVolumeByUser;
-
- const error = errorCumulativeUsdVolume || errorDailyUsdVolume || errorDailyUsdVolumeByCoin || errorDailyUsdVolumeByCrossed || errorDailyUsdVolumeByUser;
-
- type CumulativeVolumeData = { cumulative: number, time: string };
-
- const formatCumulativeVolumeByTime = (dataCumulativeUsdVolume: CumulativeVolumeData[]): { [key: string]: number } => {
- const result: { [key: string]: number } = {};
- for (const data of dataCumulativeUsdVolume) {
- result[data.time] = data.cumulative;
- }
- return result;
- };
-
- type FormattedDailyVolumeData = { time: string, daily_usd_volume: number };
-
- const formatDailyVolumeByTime = (dataCumulativeUsdVolume: FormattedDailyVolumeData[]): { [key: string]: number } => {
- const result: { [key: string]: number } = {};
- for (const data of dataCumulativeUsdVolume) {
- result[data.time] = data.daily_usd_volume;
- }
- return result;
- };
-
- type VolumeData = { coin: string, daily_usd_volume: number, time: string };
- type FormattedVolumeData = any[] //{ time: string, all: number, [coin: string]: number };
-
- const formatVolumeByCoins = (
- dataDailyUsdVolumeByCoin: VolumeData[],
- formattedCumulativeUsdVolume: { [key: string]: number },
- formattedDailyVolumeByTime: { [key: string]: number }
- ): FormattedVolumeData[] => {
- const temp: { [key: string]: { all: number, [coin: string]: number } } = {};
- for (const data of dataDailyUsdVolumeByCoin) {
- if (!temp[data.time]) {
- temp[data.time] = { all: 0 };
- }
- temp[data.time][data.coin] = data.daily_usd_volume;
- temp[data.time].all += data.daily_usd_volume;
- }
-
- const sortAndSliceTop10 = (obj: { [coin: string]: number }) => {
- const sortedEntries = Object.entries(obj)
- .sort(([, aVolume], [, bVolume]) => bVolume - aVolume);
- const top10Entries = sortedEntries.slice(0, 10);
- const otherEntries = sortedEntries.slice(10);
-
- const otherVolume = otherEntries.reduce((total, [, volume]) => total + volume, 0);
- return {
- ...Object.fromEntries(top10Entries),
- Other: otherVolume
- };
- };
-
- const result: any[] = Object.entries(temp).map(([time, volumes]) => {
- const top10Volumes = sortAndSliceTop10(volumes);
- return {
- time: new Date(time),
- ...top10Volumes,
- cumulative: formattedCumulativeUsdVolume[time as any],
- all: formattedDailyVolumeByTime[time as any],
- unit: "$",
- };
- });
-
- return result;
- };
-
-
- const extractUniqueCoins = (formattedVolumeData: FormattedVolumeData[]): string[] => {
- const coinSet = new Set();
- for (const data of formattedVolumeData) {
- Object.keys(data).forEach(coin => {
- if (coin !== 'all' &&
- coin !== 'cumulative' &&
- coin !== 'time' &&
- coin !== 'other' &&
- coin !== 'unit'
- ) {
- coinSet.add(coin);
- }
- });
- }
- const coinsArray = Array.from(coinSet);
- if (coinsArray.includes('Other')) {
- const index = coinsArray.indexOf('Other');
- coinsArray.splice(index, 1);
- coinsArray.push('Other');
- }
-
- return coinsArray;
- };
-
- type VolumeCrossedData = { crossed: boolean, daily_usd_volume: number, time: string }
-
- const formatVolumeByCrossed = (
- dataDailyUsdVolumeByCrossed: VolumeCrossedData[],
- formattedCumulativeUsdVolume: { [key: string]: number },
- formattedDailyVolumeByTime: { [key: string]: number }
- ): any[] => {
- // Create a temporary object to collect the data
- const temp: { [key: string]: any } = {};
-
- for (const data of dataDailyUsdVolumeByCrossed) {
- if (!temp[data.time]) {
- temp[data.time] = { all: 0, maker: 0, taker: 0 };
- }
- // Assigning daily_usd_volume to 'maker' if crossed is true, else assign to 'taker'
- if (data.crossed) {
- temp[data.time].taker = data.daily_usd_volume;
- } else {
- temp[data.time].maker = data.daily_usd_volume;
- }
- temp[data.time].all += data.daily_usd_volume;
- }
- // Convert the collected data into an array
- const result: any[] = Object.entries(temp).map((item: any) => {
- return {
- time: new Date(item[0]),
- maker: item[1].maker || 0,
- taker: item[1].taker || 0,
- cumulative: formattedCumulativeUsdVolume[item[0]],
- all: formattedDailyVolumeByTime[item[0]],
- unit: "$",
- };
- });
- return result;
- };
-
- const formatData = () => {
- const formattedCumulativeVolumeByTime = formatCumulativeVolumeByTime(dataCumulativeUsdVolume)
- const formattedDailyVolumeByTime = formatDailyVolumeByTime(dataDailyUsdVolume)
- const formattedVolumeByCoins = formatVolumeByCoins(dataDailyUsdVolumeByCoin, formattedCumulativeVolumeByTime, formattedDailyVolumeByTime);
- const formattedVolumeByCrossed = formatVolumeByCrossed(dataDailyUsdVolumeByCrossed, formattedCumulativeVolumeByTime, formattedDailyVolumeByTime);
- setCoinKeys(extractUniqueCoins(formattedVolumeByCoins))
- setFormattedDataCoins(formattedVolumeByCoins);
- setFormattedDataMarin(formattedVolumeByCrossed)
- };
-
- const controls = {
- toggles: [
- {
- text: "Coins",
- event: () => setDataMode('COINS'),
- active: dataMode === 'COINS',
- },
- {
- text: "Maker / Taker",
- event: () => setDataMode('MARGIN'),
- active: dataMode === 'MARGIN',
- }
- ]
- }
-
- useEffect(() => {
- if (!loading) {
- formatData();
- }
- }, [loading])
-
- return (
-
-
-
-
-
-
-
- {
- return Number(item.value) * -1;
- }}
- />
-
- {
- dataMode === 'COINS' && (
- <>
- {
- coinKeys.map(((coinName, i) => {
- return (
-
- )
- }))
- }
-
- )
- }
- {
- dataMode === 'MARGIN' && (
- <>
-
-
-
-
- )
- }
-
-
-
-
- {dataMode === 'COINS' && (
- Top 10 Coins grouped daily and remaining coins grouped by Other
- )}
-
-
- )
-}
\ No newline at end of file
diff --git a/components/home/charts/volume-num-trades.tsx b/components/home/charts/volume-num-trades.tsx
index 874858d..e699631 100644
--- a/components/home/charts/volume-num-trades.tsx
+++ b/components/home/charts/volume-num-trades.tsx
@@ -1,353 +1,380 @@
import {
- Bar,
- Label,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
- ComposedChart,
- Line
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+ ComposedChart,
+ Line,
} from 'recharts';
-import { Box, Text, useMediaQuery } from "@chakra-ui/react"
import { useEffect, useState } from 'react';
import { useRequest } from '@/hooks/useRequest';
+
import ChartWrapper from '../../common/chartWrapper';
import {
- CHART_HEIGHT,
- YAXIS_WIDTH,
- BRIGHT_GREEN,
- BRAND_GREEN_2,
- BRAND_GREEN_3,
-} from "../../../constants";
+ CHART_HEIGHT,
+ YAXIS_WIDTH,
+ BRIGHT_GREEN,
+ BRAND_GREEN_2,
+ BRAND_GREEN_3,
+} from '../../../constants';
import {
- tooltipFormatter,
- tooltipLabelFormatter,
- yaxisFormatterNumber,
- xAxisFormatter,
-} from '../../../helpers'
-import { getTokenHex } from "../../../constants/tokens";
+ tooltipFormatter,
+ tooltipLabelFormatter,
+ yaxisFormatterNumber,
+ xAxisFormatter,
+} from '../../../helpers';
+import { createCoinSelectors } from '../../../helpers/utils';
+
+import { getTokenColor, initialTokensSelectedWithOther } from '../../../constants/tokens';
import {
- cumulative_trades,
- daily_trades,
- daily_trades_by_coin,
- daily_trades_by_crossed,
- daily_trades_by_user,
-} from "../../../constants/api"
+ cumulative_trades,
+ daily_trades,
+ daily_trades_by_coin,
+ daily_trades_by_crossed,
+ daily_trades_by_user,
+} from '../../../constants/api';
const REQUESTS = [
- daily_trades,
- daily_trades_by_coin,
- daily_trades_by_crossed,
- daily_trades_by_user,
- cumulative_trades,
+ daily_trades,
+ daily_trades_by_coin,
+ daily_trades_by_crossed,
+ daily_trades_by_user,
+ cumulative_trades,
];
export default function VolumeChart() {
- const [isMobile] = useMediaQuery('(max-width: 700px)');
-
- const [dataMode, setDataMode] = useState<"COINS" | "MARGIN" | "USER">('COINS');
- const [formattedDataCoins, setFormattedDataCoins] = useState([])
- const [formattedDataMarin, setFormattedDataMarin] = useState([])
- const [formattedDataUsers, setFormattedDataUsers] = useState([])
- const [maxAllValueUser, setMaxAllValueUser] = useState('auto');
- const [uniqueUsers, setUniqueUsers] = useState([])
- const [coinKeys, setCoinKeys] = useState([])
+ const [coinsSelected, setCoinsSelected] = useState(initialTokensSelectedWithOther);
- const [dataDailyTrades, loadingDailyTrades, errorDailyTrades] = useRequest(REQUESTS[0], [], 'chart_data');
- const [dataDailyTradesByCoin, loadingDailyTradesByCoin, errorDailyTradesByCoin] = useRequest(REQUESTS[1], [], 'chart_data');
- const [dataDailyTradesByMargin, loadingDailyTradesByMargin, errorDailyTradesByMargin] = useRequest(REQUESTS[2], [], 'chart_data');
- const [dataDailyTradesByUser, loadingDailyTradesByUser, errorDailyTradesByUser] = useRequest(REQUESTS[3], [], 'chart_data');
- const [dataCumulativeTrades, loadingCumulativeTrades, errorCumulativeTrades] = useRequest(REQUESTS[4], [], 'chart_data');
+ const [dataMode, setDataMode] = useState<'COINS' | 'MARGIN' | 'USER'>('COINS');
+ const [formattedDataCoins, setFormattedDataCoins] = useState([]);
+ const [formattedDataMarin, setFormattedDataMarin] = useState([]);
+ const [formattedDataUsers, setFormattedDataUsers] = useState([]);
+ const [maxAllValueUser, setMaxAllValueUser] = useState('auto');
+ const [uniqueUsers, setUniqueUsers] = useState([]);
+ const [coinKeys, setCoinKeys] = useState([]);
- const loading = loadingDailyTrades || loadingDailyTradesByCoin || loadingDailyTradesByMargin || loadingDailyTradesByUser || loadingCumulativeTrades;
+ const [dataDailyTrades, loadingDailyTrades, errorDailyTrades] = useRequest(
+ REQUESTS[0],
+ [],
+ 'chart_data'
+ );
+ const [dataDailyTradesByCoin, loadingDailyTradesByCoin, errorDailyTradesByCoin] = useRequest(
+ REQUESTS[1],
+ [],
+ 'chart_data'
+ );
+ const [dataDailyTradesByMargin, loadingDailyTradesByMargin, errorDailyTradesByMargin] =
+ useRequest(REQUESTS[2], [], 'chart_data');
+ const [dataDailyTradesByUser, loadingDailyTradesByUser, errorDailyTradesByUser] = useRequest(
+ REQUESTS[3],
+ [],
+ 'chart_data'
+ );
+ const [dataCumulativeTrades, loadingCumulativeTrades, errorCumulativeTrades] = useRequest(
+ REQUESTS[4],
+ [],
+ 'chart_data'
+ );
- const error = errorDailyTrades || errorDailyTradesByCoin || errorDailyTradesByMargin || errorDailyTradesByUser || errorCumulativeTrades;
- ``
+ const loading =
+ loadingDailyTrades ||
+ loadingDailyTradesByCoin ||
+ loadingDailyTradesByMargin ||
+ loadingDailyTradesByUser ||
+ loadingCumulativeTrades;
- type CumulativeTradeData = { cumulative: number, time: string };
-
- const formatTradesByTime = (dataCumulativeUsdVolume: CumulativeTradeData[]): { [key: string]: number } => {
- const result: { [key: string]: number } = {};
- for (const data of dataCumulativeUsdVolume) {
- result[data.time] = data.cumulative;
- }
- return result;
- };
+ const error =
+ errorDailyTrades ||
+ errorDailyTradesByCoin ||
+ errorDailyTradesByMargin ||
+ errorDailyTradesByUser ||
+ errorCumulativeTrades;
+ ``;
- type DailyTradesData = { time: string, daily_trades: number };
+ type CumulativeTradeData = { cumulative: number; time: string };
- const formatDailyTradesByTime = (dataDailyTrades: DailyTradesData[]): { [key: string]: number } => {
- const result: { [key: string]: number } = {};
- for (const data of dataDailyTrades) {
- result[data.time] = data.daily_trades;
- }
- return result;
- };
-
- type CoinTradesData = { coin: string, daily_usd_volume: number, time: string };
- type FormattedCoinTradesData = any[] //{ time: string, all: number, [coin: string]: number };
-
- const formatDailyTradesByCoins = (
- dataDailyTradesByCoin: { coin: string, daily_trades: number, time: string }[],
- formattedCumulativeTradesByTime: { [key: string]: number },
- ): FormattedCoinTradesData[] => {
- const temp: { [key: string]: { all: number, [coin: string]: number } } = {};
- for (const data of dataDailyTradesByCoin) {
- if (!temp[data.time]) {
- temp[data.time] = { all: 0 };
- }
- temp[data.time][data.coin] = data.daily_trades;
- temp[data.time].all += data.daily_trades;
- }
+ const formatTradesByTime = (
+ dataCumulativeUsdVolume: CumulativeTradeData[]
+ ): { [key: string]: number } => {
+ const result: { [key: string]: number } = {};
+ for (const data of dataCumulativeUsdVolume) {
+ result[data.time] = data.cumulative;
+ }
+ return result;
+ };
- const sortAndSliceTop10 = (obj: { [coin: string]: number }) => {
- const sortedEntries = Object.entries(obj)
- .sort(([, aVolume], [, bVolume]) => bVolume - aVolume);
- const top10Entries = sortedEntries.slice(0, 10);
- const otherEntries = sortedEntries.slice(10);
+ type FormattedCoinTradesData = any[]; //{ time: string, all: number, [coin: string]: number };
- const otherVolume = otherEntries.reduce((total, [, volume]) => total + volume, 0);
- return {
- ...Object.fromEntries(top10Entries),
- Other: otherVolume
- };
- };
+ const formatDailyTradesByCoins = (
+ CoinsSelected: string[],
+ dataDailyTradesByCoin: { coin: string; daily_trades: number; time: string }[],
+ formattedCumulativeTradesByTime: { [key: string]: number }
+ ): FormattedCoinTradesData[] => {
+ const temp: { [key: string]: { all: number; [coin: string]: number } } = {};
+ for (const data of dataDailyTradesByCoin) {
+ if (!temp[data.time]) {
+ temp[data.time] = { all: 0 };
+ }
+ temp[data.time][data.coin] = data.daily_trades;
+ temp[data.time].all += data.daily_trades;
+ }
- const result: any[] = Object.entries(temp).map(([time, volumes]) => {
- const top10Volumes = sortAndSliceTop10(volumes);
- return {
- time: new Date(time),
- ...top10Volumes,
- cumulative: formattedCumulativeTradesByTime[time as any],
- unit: '',
- };
- });
- return result;
+ const selectedCoinData = (obj: { [coin: string]: number }) => {
+ const selectedEntries = Object.entries(obj).filter(
+ ([coin]) => CoinsSelected.includes(coin) || coin === 'all'
+ );
+ const otherEntries = Object.entries(obj).filter(
+ ([coin]) => !CoinsSelected.includes(coin) && coin !== 'all'
+ );
+ const otherVolume = otherEntries.reduce((total, [, volume]) => total + volume, 0);
+ return {
+ ...Object.fromEntries(selectedEntries),
+ Other: otherVolume,
+ };
};
- const extractUniqueCoins = (formattedCoinTradesData: FormattedCoinTradesData[]): string[] => {
- const coinSet = new Set();
- for (const data of formattedCoinTradesData) {
- Object.keys(data).forEach(coin => {
- if (coin !== 'all' && coin !== 'cumulative' && coin !== 'time' && coin !== 'unit') {
- coinSet.add(coin);
- }
- });
- }
- const coinsArray = Array.from(coinSet);
- if (coinsArray.includes('Other')) {
- const index = coinsArray.indexOf('Other');
- coinsArray.splice(index, 1);
- coinsArray.push('Other');
- }
- return coinsArray;
- };
+ const result: any[] = Object.entries(temp).map(([time, volumes]) => {
+ const top10Volumes = selectedCoinData(volumes);
+ return {
+ time: new Date(time),
+ ...top10Volumes,
+ cumulative: formattedCumulativeTradesByTime[time as any],
+ unit: '',
+ };
+ });
+ return result;
+ };
- type MarginData = { crossed: boolean, daily_trades: number, time: string };
- type FormattedMarginData = { time: Date, maker: number, taker: number, all: number, cumulative: number };
+ const extractUniqueCoins = (CoinData: any): string[] => {
+ const coinSet = new Set();
+ for (const data of CoinData) {
+ coinSet.add(data.coin);
+ }
+ const coinsArray = Array.from(coinSet);
+ return coinsArray;
+ };
- const formatTradesByMargin = (
- dataDailyTradesByMargin: MarginData[],
- formattedCumulativeTradesByTime: { [key: string]: number },
- ): FormattedMarginData[] => {
- const groupedByTime: { [key: string]: FormattedMarginData } = {};
+ type MarginData = { crossed: boolean; daily_trades: number; time: string };
+ type FormattedMarginData = {
+ time: Date;
+ maker: number;
+ taker: number;
+ all: number;
+ cumulative: number;
+ };
- for (const data of dataDailyTradesByMargin) {
- const dateKey = new Date(data.time).toISOString();
+ const formatTradesByMargin = (
+ dataDailyTradesByMargin: MarginData[],
+ formattedCumulativeTradesByTime: { [key: string]: number }
+ ): FormattedMarginData[] => {
+ const groupedByTime: { [key: string]: FormattedMarginData } = {};
- if (!groupedByTime[dateKey]) {
- groupedByTime[dateKey] = {
- time: new Date(data.time),
- maker: 0,
- taker: 0,
- all: 0,
- cumulative: 0,
- }
- }
+ for (const data of dataDailyTradesByMargin) {
+ const dateKey = new Date(data.time).toISOString();
- if (data.crossed) {
- groupedByTime[dateKey].taker += data.daily_trades;
- } else {
- groupedByTime[dateKey].maker += data.daily_trades;
- }
- groupedByTime[dateKey].all += data.daily_trades;
- groupedByTime[dateKey].cumulative = formattedCumulativeTradesByTime[data.time as any];
- }
+ if (!groupedByTime[dateKey]) {
+ groupedByTime[dateKey] = {
+ time: new Date(data.time),
+ maker: 0,
+ taker: 0,
+ all: 0,
+ cumulative: 0,
+ };
+ }
- return Object.values(groupedByTime);
+ if (data.crossed) {
+ groupedByTime[dateKey].taker += data.daily_trades;
+ } else {
+ groupedByTime[dateKey].maker += data.daily_trades;
+ }
+ groupedByTime[dateKey].all += data.daily_trades;
+ groupedByTime[dateKey].cumulative = formattedCumulativeTradesByTime[data.time as any];
}
- const formatData = () => {
- const formattedCumulativeTradesByTime = formatTradesByTime(dataCumulativeTrades)
- const formattedTradesByCoins = formatDailyTradesByCoins(dataDailyTradesByCoin, formattedCumulativeTradesByTime);
- const formattedTradesByMargin = formatTradesByMargin(dataDailyTradesByMargin, formattedCumulativeTradesByTime);
- setMaxAllValueUser(maxAllValueUser);
- setCoinKeys(extractUniqueCoins(formattedTradesByCoins))
- setFormattedDataCoins(formattedTradesByCoins);
- setFormattedDataMarin(formattedTradesByMargin);
- };
+ return Object.values(groupedByTime);
+ };
+
+ const formatData = (CoinsSelected: string[]) => {
+ const formattedCumulativeTradesByTime = formatTradesByTime(dataCumulativeTrades);
+ const formattedTradesByCoins = formatDailyTradesByCoins(
+ CoinsSelected,
+ dataDailyTradesByCoin,
+ formattedCumulativeTradesByTime
+ );
+ const formattedTradesByMargin = formatTradesByMargin(
+ dataDailyTradesByMargin,
+ formattedCumulativeTradesByTime
+ );
+ setMaxAllValueUser(maxAllValueUser);
+ setCoinKeys(extractUniqueCoins(dataDailyTradesByCoin));
+ setFormattedDataCoins(formattedTradesByCoins);
+ setFormattedDataMarin(formattedTradesByMargin);
+ };
- const controls = {
- toggles: [
- {
- text: "Coins",
- event: () => setDataMode('COINS'),
- active: dataMode === 'COINS',
- },
- {
- text: "Maker / Taker",
- event: () => setDataMode('MARGIN'),
- active: dataMode === 'MARGIN',
- }
- ]
+ const controls = {
+ toggles: [
+ {
+ text: 'Coins',
+ event: () => setDataMode('COINS'),
+ active: dataMode === 'COINS',
+ },
+ {
+ text: 'Maker / Taker',
+ event: () => setDataMode('MARGIN'),
+ active: dataMode === 'MARGIN',
+ },
+ ],
+ };
+
+ useEffect(() => {
+ if (!loading && !error) {
+ formatData(coinsSelected);
}
+ }, [loading, dataMode]);
- useEffect(() => {
- if (!loading && !error) {
- formatData();
- }
- }, [loading, dataMode])
+ const coinSelectors = createCoinSelectors(coinKeys, coinsSelected, setCoinsSelected, formatData);
- return (
-
+
+
-
-
-
-
-
-
- {
- return Number(item.value) * -1;
- }}
- />
- {(dataMode === 'COINS' || dataMode === 'MARGIN') && }
- {
- dataMode === 'COINS' && (
- <>
- {
- coinKeys.map(((coinName, i) => {
- return (
-
- )
- }))
- }
-
- )
- }
- {
- dataMode === 'MARGIN' && (
- <>
-
-
-
- )
- }
- {
- dataMode === 'USER' && (
- <>
- {
- uniqueUsers.map(((user, i) => {
- return (
-
- )
- }))
- }
-
- )
- }
-
-
-
-
- {dataMode === 'COINS' && (
- Top 10 Coins grouped daily and remaining coins grouped by Other
- )}
-
-
- )
-}
\ No newline at end of file
+
+
+
+
+ {
+ return Number(item.value) * -1;
+ }}
+ />
+ {(dataMode === 'COINS' || dataMode === 'MARGIN') && (
+
+ )}
+ {dataMode === 'COINS' && (
+ <>
+ {coinsSelected.map((coinName, i) => {
+ return (
+
+ );
+ })}
+
+ )}
+ {dataMode === 'MARGIN' && (
+ <>
+
+
+
+ )}
+ {dataMode === 'USER' && (
+ <>
+ {uniqueUsers.map((user, i) => {
+ return (
+
+ );
+ })}
+
+ )}
+
+
+
+
+ );
+}
diff --git a/components/home/charts/volume-total.tsx b/components/home/charts/volume-total.tsx
new file mode 100644
index 0000000..2427602
--- /dev/null
+++ b/components/home/charts/volume-total.tsx
@@ -0,0 +1,202 @@
+import {
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+ ComposedChart,
+ Line,
+} from 'recharts';
+import { useEffect, useState } from 'react';
+import { useRequest } from '@/hooks/useRequest';
+
+import ChartWrapper from '../../common/chartWrapper';
+import { BRIGHT_GREEN, CHART_HEIGHT, YAXIS_WIDTH } from '../../../constants';
+import {
+ yaxisFormatter,
+ xAxisFormatter,
+ tooltipFormatterCurrency,
+ tooltipLabelFormatter,
+} from '../../../helpers';
+import { createCoinSelectors } from '../../../helpers/utils';
+
+import { total_volume } from '../../../constants/api';
+import { getTokenColor, initialTokensSelectedWithOther } from '@/constants/tokens';
+
+const REQUESTS = [total_volume];
+
+export default function TotalVolumeChart() {
+ const [formattedData, setFormattedData] = useState([]);
+ const [coinsSelected, setCoinsSelected] = useState(initialTokensSelectedWithOther);
+ const [coins, setCoins] = useState([]);
+ const [dataTotalVolume, loading, error] = useRequest(REQUESTS[0], [], 'chart_data');
+
+ interface TotalVolume {
+ time: string;
+ total_volume: number;
+ coin: string;
+ }
+
+ interface MergedData {
+ time: Date;
+ total: number;
+ [coin: string]: any;
+ cumulative: number;
+ unit: string;
+ Other: number;
+ }
+
+ const makeFormattedData = (
+ CoinsSelected: string[],
+ dataTotalVolume: TotalVolume[]
+ ): [MergedData[], string[]] => {
+ const map = new Map();
+ const uniqueCoins = new Set();
+
+ let cumulative = 0;
+ dataTotalVolume.forEach((item: TotalVolume) => {
+ let { time, coin, total_volume } = item;
+ if (CoinsSelected.includes(coin) || CoinsSelected.includes('Other')) {
+ cumulative += total_volume;
+ }
+ if (!map.has(time)) {
+ map.set(time, {
+ time: new Date(time),
+ total: total_volume,
+ [`${coin}`]: total_volume,
+ cumulative,
+ Other: 0,
+ unit: '$',
+ });
+ } else {
+ const existingEntry = map.get(time)!;
+ existingEntry[`${coin}`] = (existingEntry[`${coin}`] || 0) + total_volume;
+ if (CoinsSelected.includes(coin) || CoinsSelected.includes('Other')) {
+ existingEntry.total += total_volume;
+ }
+ existingEntry.cumulative = cumulative;
+ }
+ });
+
+ map.forEach((entry) => {
+ const coinEntries = Object.entries(entry).filter(
+ ([key]) => key !== 'time' && key !== 'total' && key !== 'other' && key !== 'unit'
+ );
+ const otherCoins = coinEntries.filter(
+ ([coin]) => !CoinsSelected.includes(coin) && coin !== 'all'
+ );
+
+ coinEntries.forEach(([coin]) => uniqueCoins.add(coin));
+
+ let otherTotal = 0;
+ otherCoins.forEach(([key, value]) => {
+ if (key !== 'cumulative') {
+ otherTotal += value;
+ }
+ });
+ entry.Other = otherTotal;
+ });
+
+ const result = Array.from(map.values());
+ return [result, Array.from(uniqueCoins)];
+ };
+
+ const formatData = (CoinsSelected: string[]) => {
+ const [newFormattedData, coins] = makeFormattedData(CoinsSelected, dataTotalVolume);
+ setCoins(coins);
+ setFormattedData(newFormattedData);
+ };
+
+ useEffect(() => {
+ if (!loading && !error) {
+ formatData(coinsSelected);
+ }
+ }, [loading, error]);
+
+ const coinSelectors = createCoinSelectors(
+ coins,
+ coinsSelected,
+ setCoinsSelected,
+ formatData,
+ false,
+ 'Other'
+ );
+
+ return (
+
+
+
+
+
+
+
+ {coinsSelected.map((coin, i) => {
+ return (
+
+ );
+ })}
+
+
+ tooltipLabelFormatter(label, args, 'total')}
+ contentStyle={{
+ textAlign: 'left',
+ background: '#0A1F1B',
+ borderColor: '#061412',
+ color: '#fff',
+ boxShadow: '0px 0px 7px rgb(0 0 0 / 20%)',
+ borderRadius: '26px',
+ maxHeight: '500px',
+ }}
+ position={{ y: -100 }}
+ itemSorter={(item) => {
+ return Number(item.value) * -1;
+ }}
+ />
+
+
+
+ );
+}
diff --git a/components/home/main/index.tsx b/components/home/main/index.tsx
index dc35f6f..04f7611 100644
--- a/components/home/main/index.tsx
+++ b/components/home/main/index.tsx
@@ -1,95 +1,124 @@
-'use client'
-import React, { useState } from 'react';
-import moment from "moment";
+'use client';
+import React, { useEffect } from 'react';
import { Container, Box, Text, Grid, Flex } from '@chakra-ui/react';
-import * as S from './styles';
import TopStats from '../charts/top-stats';
-import VolumeNonMMChart from '../charts/volume-non-hlp';
+import RetailVolumeChart from '../charts/retail-volume';
import VolumeNumTrades from '../charts/volume-num-trades';
import OpenInterestChart from '../charts/open-interest';
import TradersProfitLossChart from '../charts/trader-profit';
-import HLPProfitLossChart from '../charts/hlp-liquidator-profit';
import { DateRangeSelect } from '../charts/date-range';
import FundingRateChart from '../charts/funding-rate';
import CumulativeUsersChart from '../charts/cumulative-users';
-import CoinTradesByUsers from "../charts/uniquie-users-coin";
import CumulativeInflowChart from '../charts/cumulative-inflow';
-import CumulativeNotionalLiquidatedChart from '../charts/cumulative-notional-liquidated';
-import TableLargestUsers from "../tables/largest-users"
-import TableUserDesposits from "../tables/user-deposits"
-import TableLiquidatedNotional from "../tables/liquidated-notional-user"
-import TableTradeCount from "../tables/user-trade-count"
-import Liquidity from "../charts/liquidity"
-
+import CumulativeNotionalLiquidatedChart from '../charts/liquidator';
+import TableLargestUsers from '../tables/largest-users';
+import TableUserDesposits from '../tables/user-deposits';
+import TableLiquidatedNotional from '../tables/liquidated-notional-user';
+import TableTradeCount from '../tables/user-trade-count';
+import Liquidity from '../charts/liquidity';
+import HlpExposure from '../charts/hlp';
+import TotalVolumeChart from '../charts/volume-total';
+import UniqueUsers from '../charts/unique-users-coin';
+import mixpanel from 'mixpanel-browser';
const Main = () => {
-
- return (
- {
+ if (process.env.NEXT_PUBLIC_MIXPANEL_TOKEN) {
+ mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_TOKEN, {
+ api_host: 'https://metrics.hyperliquid.xyz',
+ });
+ mixpanel.track('Stats Loaded');
+ }
+ }, []);
+ return (
+
+
+
+
+ Hyperliquid Stats
+
+
+
+
+
-
-
-
- Hyperliquid Stats
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
+
+