Fixing slippage chart and misc clean up (#19)

hyperliquid-dex · Aug 10, 2023 · b8d83a9 · b8d83a9
1 parent 29de041
commit b8d83a9
Show file tree

Hide file tree

Showing 19 changed files with 70 additions and 111 deletions.
diff --git a/components/common/chartWrapper/index.tsx b/components/common/chartWrapper/index.tsx
@@ -63,12 +63,7 @@ function ChartWrapper({ title, loading, controls, zIndex, coinSelectors, childre
     });
 
   const coinSelectorsMenu = coinSelectors && (
-    <Box
-      w={{ xs: '100%', md: '100%' }}
-      display='flex'
-      justifyContent={{ xs: 'flex-start', md: 'flex-end' }}
-      mb='1rem'
-    >
+    <Box>
       <Menu closeOnSelect={false} preventOverflow={true}>
         <MenuButton
           as={Button}
@@ -120,8 +115,26 @@ function ChartWrapper({ title, loading, controls, zIndex, coinSelectors, childre
     </Box>
   );
 
+  const menu = (
+    <Box display='flex' padding='0'>
+      <Grid
+        mb='1rem'
+        templateColumns='1fr auto'
+        gap={controls ? '2' : '0'}
+        justifyContent='flex-start'
+      >
+        {isMobile && controls ? (
+          controlButtons
+        ) : (
+          <ButtonGroup isAttached={true}>{controlButtons}</ButtonGroup>
+        )}
+        {coinSelectorsMenu}
+      </Grid>
+    </Box>
+  );
+
   return (
-    <Box display='grid' width={{ xs: '100%', md: '100%' }} mt='3' p={{ xs: '0', md: '0 5 0 0' }}>
+    <Box display='grid' mt='3' p={{ xs: '0', md: '0 5 0 0' }}>
       <Box
         position='relative'
         p={{ xs: '2', md: '4' }}
@@ -130,44 +143,12 @@ function ChartWrapper({ title, loading, controls, zIndex, coinSelectors, childre
         borderRadius={{ xs: '0', md: '2xl' }}
         zIndex={zIndex}
       >
-        <Box w='100%' mb='2'>
-          <Box
-            w='100%'
-            mb='2'
-            display='flex'
-            justifyContent='space-between'
-            flexDirection={{ xs: 'column', md: 'row' }}
-            gap={4}
-          >
-            <Text
-              display='flex'
-              w={{ xs: '100%', md: '100%' }}
-              fontSize='1.2rem'
-              fontWeight='600'
-              whiteSpace={'nowrap'}
-            >
-              {title}
-            </Text>
-            <Box
-              w={{ xs: '100%', md: '100%' }}
-              display='flex'
-              justifyContent={{ xs: 'flex-start', md: 'center' }}
-              mb='1rem'
-            >
-              {isMobile ? (
-                <Grid templateColumns='1fr 1fr' gap='2'>
-                  {controlButtons}
-                  {coinSelectorsMenu}
-                </Grid>
-              ) : (
-                <>
-                  <ButtonGroup isAttached={true}>{controlButtons}</ButtonGroup>
-                  {coinSelectorsMenu}
-                </>
-              )}
-            </Box>
-          </Box>
-        </Box>
+        <Grid gridTemplateColumns={{ xs: '1fr', xl: '1fr auto' }} gap={4}>
+          <Text fontSize='1.2rem' fontWeight='600' whiteSpace={'nowrap'}>
+            {title}
+          </Text>
+          {menu}
+        </Grid>
         {loading && <Loader />}
         {children}
       </Box>

diff --git a/components/home/charts/cumulative-inflow.tsx b/components/home/charts/cumulative-inflow.tsx
@@ -97,7 +97,7 @@ export default function CumulativeInflow() {
 
   return (
     <ChartWrapper title='Inflows' loading={loading}>
-      <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
+      <ResponsiveContainer width='99%' height={CHART_HEIGHT}>
         <ComposedChart data={formattedData}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />
           <XAxis

diff --git a/components/home/charts/cumulative-users.tsx b/components/home/charts/cumulative-users.tsx
@@ -72,7 +72,7 @@ export default function CumulativeUsers() {
 
   return (
     <ChartWrapper title='Cumulative New Users' loading={loading}>
-      <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
+      <ResponsiveContainer width='99%' height={CHART_HEIGHT}>
         <ComposedChart data={formattedData}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />
           <XAxis

diff --git a/components/home/charts/fees.tsx b/components/home/charts/fees.tsx
@@ -67,7 +67,7 @@ export default function Fees() {
 
   return (
     <ChartWrapper title='Fees Accrued' loading={loading}>
-      <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
+      <ResponsiveContainer width='99%' height={CHART_HEIGHT}>
         <ComposedChart data={formattedData}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />
           <XAxis

diff --git a/components/home/charts/funding-rate.tsx b/components/home/charts/funding-rate.tsx
@@ -116,7 +116,7 @@ export default function FundingRate() {
 
   return (
     <ChartWrapper title='Annualized Funding Rate' loading={loading} coinSelectors={coinSelectors}>
-      <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
+      <ResponsiveContainer width='99%' height={CHART_HEIGHT}>
         <LineChart data={formattedData}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />
           <XAxis

diff --git a/components/home/charts/hlp.tsx b/components/home/charts/hlp.tsx
@@ -236,7 +236,7 @@ export default function Hlp() {
 
   return (
     <ChartWrapper title='HLP' loading={false} controls={controls}>
-      <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
+      <ResponsiveContainer width='99%' height={CHART_HEIGHT}>
         <ComposedChart data={dataMode === 'PNL' ? formattedHlpPnL : formattedData}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />
           <XAxis
@@ -302,6 +302,7 @@ export default function Hlp() {
                 stroke={BRIGHT_GREEN}
                 dataKey='hedged_cumulative_pnl'
                 name='Cumulative PnL'
+                dot={false}
               />
               <Bar
                 isAnimationActive={false}
@@ -356,8 +357,8 @@ export default function Hlp() {
       <Box w='100%' mt='3'>
         {dataMode === 'HEDGED' && (
           <Text color='#bbb'>
-            Hedged PNL over time. Hedge the previous day&apos;s position and add to today&apos;s
-            PNL.
+            Hedge each day&apos;s returns by holding the previous day&apos;s ending positions for
+            each asset.
           </Text>
         )}
       </Box>

diff --git a/components/home/charts/liquidator.tsx b/components/home/charts/liquidator.tsx
@@ -310,7 +310,7 @@ export default function LiquidatorChart(props: any) {
       zIndex={7}
       coinSelectors={dataMode === 'COINS' ? coinSelectors : undefined}
     >
-      <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
+      <ResponsiveContainer width='99%' height={CHART_HEIGHT}>
         <ComposedChart data={dataModeToData(dataMode)} syncId='liquidatorSync'>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />
           <XAxis

diff --git a/components/home/charts/liquidity.tsx b/components/home/charts/liquidity.tsx
@@ -9,9 +9,8 @@ import {
   LineChart,
 } 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 ChartWrapper from '../../common/chartWrapper';
 import { CHART_HEIGHT } from '../../../constants';
 import {
   tooltipFormatter,
@@ -31,16 +30,14 @@ export default function Liquidity(props: any) {
 
   const [formattedData0, setFormattedData0] = useState<any[]>([]);
   const [formattedData1000, setFormattedData1000] = useState<any[]>([]);
-  const [formattedData3000, setFormattedData3000] = useState<any[]>([]);
   const [formattedData10000, setFormattedData10000] = useState<any[]>([]);
 
   const [coinKeys, setCoinKeys] = useState<any[]>([]);
   const [coinKeys0, setCoinKeys0] = useState<any[]>([]);
   const [coinKeys1000, setCoinKeys1000] = useState<any[]>([]);
-  const [coinKeys3000, setCoinKeys3000] = useState<any[]>([]);
   const [coinKeys10000, setCoinKeys10000] = useState<any[]>([]);
 
-  const [dataMode, setDataMode] = useState<'0' | '1000' | '3000' | '10000'>('0');
+  const [dataMode, setDataMode] = useState<'0' | '1000' | '10000'>('0');
   const [coinsSelected, setCoinsSelected] = useState<string[]>(initialTokensSelected);
 
   const [dataLiqudity, loadingLiqudity, errorLiqudity] = useRequest(REQUESTS[0], [], 'chart_data');
@@ -59,11 +56,6 @@ export default function Liquidity(props: any) {
         event: () => setDataMode('1000'),
         active: dataMode === '1000',
       },
-      {
-        text: '$3k',
-        event: () => setDataMode('3000'),
-        active: dataMode === '3000',
-      },
       {
         text: '$10k',
         event: () => setDataMode('10000'),
@@ -76,7 +68,6 @@ export default function Liquidity(props: any) {
     [key: string]: {
       median_slippage_0: number;
       median_slippage_1000: number;
-      median_slippage_3000: number;
       median_slippage_10000: number;
       time: string;
     }[];
@@ -85,7 +76,6 @@ export default function Liquidity(props: any) {
   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 }[];
   };
 
@@ -112,10 +102,6 @@ export default function Liquidity(props: any) {
       string,
       { time: Date; [key: string]: number | Date | string }
     >();
-    const median_slippage_3000 = new Map<
-      string,
-      { time: Date; [key: string]: number | Date | string }
-    >();
     const median_slippage_10000 = new Map<
       string,
       { time: Date; [key: string]: number | Date | string }
@@ -130,40 +116,42 @@ export default function Liquidity(props: any) {
           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);
       });
     }
 
+    const sortByDate = (a: Date, b: Date) => {
+      return a.valueOf() - b.valueOf();
+    };
+
     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()),
+      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)
+      ),
     };
   };
 
   const extractUniqueCoins = (
-    data:
-      | OutputData['median_slippage_1000']
-      | OutputData['median_slippage_10000']
-      | OutputData['median_slippage_3000']
+    data: OutputData['median_slippage_1000'] | OutputData['median_slippage_10000']
   ): string[] => {
     const coinSet = new Set<string>();
     data.forEach((record) => {
@@ -182,16 +170,13 @@ export default function Liquidity(props: any) {
     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);
 
     setCoinKeys0(formattedUniqueCoinKeys0);
     setCoinKeys1000(formattedUniqueCoinKeys1000);
-    setCoinKeys3000(formattedUniqueCoinKeys3000);
     setCoinKeys10000(formattedUniqueCoinKeys10000);
   };
 
@@ -206,30 +191,22 @@ export default function Liquidity(props: any) {
       ? formattedData0
       : dataMode === '1000'
       ? formattedData1000
-      : dataMode === '3000'
-      ? formattedData3000
       : formattedData10000;
 
   const chartDataCoinKeys =
-    dataMode === '0'
-      ? coinKeys0
-      : dataMode === '1000'
-      ? coinKeys1000
-      : dataMode === '3000'
-      ? coinKeys3000
-      : coinKeys10000;
+    dataMode === '0' ? coinKeys0 : dataMode === '1000' ? coinKeys1000 : coinKeys10000;
 
   const coinSelectors = createCoinSelectors(coinKeys, coinsSelected, setCoinsSelected, formatData);
 
   return (
     <ChartWrapper
-      title='Slippage % by Trade Size'
+      title='Slippage % By Trade Size'
       loading={loading}
       controls={controls}
       zIndex={8}
       coinSelectors={coinSelectors}
     >
-      <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
+      <ResponsiveContainer width='99%' height={CHART_HEIGHT}>
         <LineChart data={chartData}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />
           <XAxis
@@ -266,6 +243,7 @@ export default function Liquidity(props: any) {
                 stroke={getTokenColor(coinName.toString())}
                 key={i}
                 dot={false}
+                connectNulls
               />
             );
           })}

diff --git a/components/home/charts/open-interest.tsx b/components/home/charts/open-interest.tsx
@@ -127,7 +127,7 @@ export default function VolumeChart(props: any) {
 
   return (
     <ChartWrapper title='Open Interest' loading={loading}>
-      <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
+      <ResponsiveContainer width='99%' height={CHART_HEIGHT}>
         <LineChart data={formattedData}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />
           <XAxis

diff --git a/components/home/charts/retail-volume.tsx b/components/home/charts/retail-volume.tsx
@@ -254,7 +254,7 @@ export default function RetailVolumeChart(props: any) {
       controls={controls}
       coinSelectors={dataMode === 'COINS' ? coinSelectors : undefined}
     >
-      <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
+      <ResponsiveContainer width='99%' height={CHART_HEIGHT}>
         <ComposedChart
           data={dataMode === 'COINS' ? formattedDataCoins : formattedDataMargin}
           syncId='retailSync'

diff --git a/components/home/charts/trader-profit.tsx b/components/home/charts/trader-profit.tsx
@@ -102,7 +102,7 @@ export default function TradersProfitLossChart(props: any) {
 
   return (
     <ChartWrapper title='Traders Net PnL' loading={loading}>
-      <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
+      <ResponsiveContainer width='99%' height={CHART_HEIGHT}>
         <ComposedChart data={data ? data.data : []}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />
           <XAxis

diff --git a/components/home/charts/unique-users-coin.tsx b/components/home/charts/unique-users-coin.tsx
@@ -187,7 +187,7 @@ export default function UniqueUsers() {
       zIndex={8}
       coinSelectors={coinSelectors}
     >
-      <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
+      <ResponsiveContainer width='99%' height={CHART_HEIGHT}>
         <ComposedChart data={formattedData}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />
           <XAxis

diff --git a/components/home/charts/volume-num-trades.tsx b/components/home/charts/volume-num-trades.tsx
@@ -246,7 +246,7 @@ export default function VolumeChart() {
       zIndex={9}
       coinSelectors={dataMode === 'COINS' ? coinSelectors : undefined}
     >
-      <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
+      <ResponsiveContainer width='99%' height={CHART_HEIGHT}>
         <ComposedChart
           data={
             dataMode === 'COINS'