hyperliquid-dex · trophies2015 · Aug 1, 2023 · Aug 1, 2023 · Aug 1, 2023
diff --git a/components/common/chartWrapper/index.tsx b/components/common/chartWrapper/index.tsx
@@ -33,7 +33,7 @@ const Loader = () => (
 );
 
 function ChartWrapper(props: any) {
-  const [isMobile] = useMediaQuery('(max-width: 700px)');
+  let isMobile = props.isMobile;
   const { title, loading, controls, zIndex, coinSelectors } = props;
   const controlButtons =
     controls &&
@@ -92,9 +92,7 @@ function ChartWrapper(props: any) {
                     {controlButtons}
                   </Grid>
                 ) : (
-                  <ButtonGroup isAttached={true}>
-                    {controlButtons}
-                  </ButtonGroup>
+                  <ButtonGroup isAttached={true}>{controlButtons}</ButtonGroup>
                 )}
               </Box>
             )}

diff --git a/components/home/charts/cumulative-inflow.tsx b/components/home/charts/cumulative-inflow.tsx
@@ -22,11 +22,12 @@ import {
   tooltipFormatterDate,
 } from '../../../helpers';
 import { daily_inflow, cumulative_inflow } from '../../../constants/api';
+import { useIsMobile } from '@/hooks/isMobile';
 
 const REQUESTS = [daily_inflow, cumulative_inflow];
 
 export default function CumulativeInflow() {
-  const [isMobile] = useMediaQuery('(max-width: 700px)');
+  const [isMobile] = useIsMobile();
 
   const [formattedData, setFormattedData] = useState<any[]>([]);
   const [dataDailyInflow, loadingDailyInflow, errorDailyInflow] = useRequest(
@@ -99,7 +100,7 @@ export default function CumulativeInflow() {
   }, [loading, errorDailyInflow]);
 
   return (
-    <ChartWrapper title='Inflows' loading={loading} data={formattedData}>
+    <ChartWrapper title='Inflows' loading={loading} data={formattedData} isMobile={isMobile}>
       <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
         <ComposedChart data={formattedData}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />

diff --git a/components/home/charts/cumulative-users.tsx b/components/home/charts/cumulative-users.tsx
@@ -11,6 +11,7 @@ import {
 } from 'recharts';
 import { useEffect, useState } from 'react';
 import { useRequest } from '@/hooks/useRequest';
+import { useIsMobile } from '@/hooks/isMobile';
 import { useMediaQuery } from '@chakra-ui/react';
 import ChartWrapper from '../../common/chartWrapper';
 import { CHART_HEIGHT, YAXIS_WIDTH, BRIGHT_GREEN, GREEN } from '../../../constants';
@@ -29,7 +30,7 @@ import {
 const REQUESTS = [cumulative_new_users, daily_unique_users, daily_unique_users_by_coin];
 
 export default function CumulativeUsers() {
-  const [isMobile] = useMediaQuery('(max-width: 700px)');
+  const [isMobile] = useIsMobile();
 
   const [formattedData, setFormattedData] = useState<any[]>([]);
 
@@ -74,7 +75,12 @@ export default function CumulativeUsers() {
   }, [loading, error]);
 
   return (
-    <ChartWrapper title='Cumulative New Users' loading={loading} data={formattedData}>
+    <ChartWrapper
+      title='Cumulative New Users'
+      loading={loading}
+      data={formattedData}
+      isMobile={isMobile}
+    >
       <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
         <ComposedChart data={formattedData}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />

diff --git a/components/home/charts/fees.tsx b/components/home/charts/fees.tsx
@@ -11,6 +11,7 @@ import {
 } from 'recharts';
 import { useEffect, useState } from 'react';
 import { useRequest } from '@/hooks/useRequest';
+import { useIsMobile } from '@/hooks/isMobile';
 import { useMediaQuery } from '@chakra-ui/react';
 import ChartWrapper from '../../common/chartWrapper';
 import { CHART_HEIGHT, YAXIS_WIDTH, BRIGHT_GREEN, GREEN } from '../../../constants';
@@ -25,7 +26,8 @@ import { total_accrued_fees } from '../../../constants/api';
 const REQUESTS = [total_accrued_fees];
 
 export default function Fees() {
-  const [isMobile] = useMediaQuery('(max-width: 700px)');
+  const [isMobile] = useIsMobile();
+
   const [formattedData, setFormattedData] = useState<any[]>([]);
   const [dailyFeesAccrued, loading, error] = useRequest(REQUESTS[0], [], 'chart_data');
 
@@ -68,7 +70,7 @@ export default function Fees() {
   }, [loading, error]);
 
   return (
-    <ChartWrapper title='Fees Accrued' loading={loading} data={formattedData}>
+    <ChartWrapper title='Fees Accrued' loading={loading} data={formattedData} isMobile={isMobile}>
       <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
         <ComposedChart data={formattedData}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />

diff --git a/components/home/charts/funding-rate.tsx b/components/home/charts/funding-rate.tsx
@@ -11,6 +11,7 @@ import {
 import { useMediaQuery } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { useRequest } from '@/hooks/useRequest';
+import { useIsMobile } from '@/hooks/isMobile';
 import ChartWrapper, { CoinSelector } from '../../common/chartWrapper';
 import { CHART_HEIGHT } from '../../../constants';
 import {
@@ -25,7 +26,7 @@ import { funding_rate } from '../../../constants/api';
 const REQUESTS = [funding_rate];
 
 export default function FundingRate() {
-  const [isMobile] = useMediaQuery('(max-width: 700px)');
+  const [isMobile] = useIsMobile();
 
   const [coinKeys, setCoinKeys] = useState<string[]>([]);
   const [formattedData, setFormattedData] = useState<GroupedFundingData[]>([]);
@@ -148,6 +149,7 @@ export default function FundingRate() {
       loading={loading}
       data={formattedData}
       coinSelectors={coinSelectors}
+      isMobile={isMobile}
     >
       <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
         <LineChart data={formattedData}>

diff --git a/components/home/charts/hlp.tsx b/components/home/charts/hlp.tsx
@@ -13,6 +13,8 @@ import {
 import { Box, Text, useMediaQuery } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { useRequest } from '@/hooks/useRequest';
+import { useIsMobile } from '@/hooks/isMobile';
+
 import ChartWrapper from '../../common/chartWrapper';
 import { BLUE, BRIGHT_GREEN, CHART_HEIGHT, GREEN, ORANGE, RED } from '../../../constants';
 import {
@@ -29,7 +31,8 @@ const REQUESTS = [hlp_positions, asset_ctxs, hlp_liquidator_pnl];
 const DAY = 60 * 60 * 24 * 1000;
 
 export default function Hlp() {
-  const [isMobile] = useMediaQuery('(max-width: 700px)');
+  const [isMobile] = useIsMobile();
+
   const [dataMode, setDataMode] = useState<'COINS' | 'NET' | 'PNL' | 'HEDGED'>('PNL');
   const [coins, setCoins] = useState<string[]>([]);
   const [dataHlpPositions, loadingDataHlpPositions, errorDataHlpPositions] = useRequest(
@@ -82,7 +85,7 @@ export default function Hlp() {
   const getOraclePxs = (assetCtxs: AssetCtx[]): Map<string, number> => {
     const map = new Map<string, number>();
     assetCtxs.forEach((item) => {
-        map.set(item.coin + item.time, item.first_oracle_px);
+      map.set(item.coin + item.time, item.first_oracle_px);
     });
     return map;
   };
@@ -128,7 +131,7 @@ export default function Hlp() {
       let { time, coin, daily_ntl } = item;
       if (!map.has(time)) {
         const pnl = hlpPnL.get(time)?.pnl || 0;
-        hedgedCumulativePnl += pnl; 
+        hedgedCumulativePnl += pnl;
         map.set(time, {
           time: new Date(time),
           daily_ntl: 0,
@@ -144,22 +147,22 @@ export default function Hlp() {
       existingEntry.daily_ntl += daily_ntl;
 
       const oraclePx = oraclePxs.get(coin + time);
-      let hedgedPnl = 0; 
+      let hedgedPnl = 0;
       const nextTime = getNextTime(time);
       let oraclePxNext = oraclePxs.get(coin + nextTime);
-            
-      let prevTimeData = prevTime ? map.get(prevTime) : null; 
-      let prevDayNtlPosition = prevTimeData ? prevTimeData[`${coin}`] : null; 
+
+      let prevTimeData = prevTime ? map.get(prevTime) : null;
+      let prevDayNtlPosition = prevTimeData ? prevTimeData[`${coin}`] : null;
 
       if (oraclePxNext && oraclePx && prevDayNtlPosition) {
         const pxChange = 1 - oraclePx / oraclePxNext;
         const pnl = -1 * prevDayNtlPosition * pxChange;
         hedgedPnl += pnl;
       }
 
-      existingEntry.hedged_pnl += hedgedPnl; 
+      existingEntry.hedged_pnl += hedgedPnl;
       hedgedCumulativePnl += hedgedPnl;
-      existingEntry.hedged_cumulative_pnl = hedgedCumulativePnl; 
+      existingEntry.hedged_cumulative_pnl = hedgedCumulativePnl;
     });
 
     map.forEach((entry) => {
@@ -237,7 +240,13 @@ export default function Hlp() {
   }, [loading, error, hlpPnL]);
 
   return (
-    <ChartWrapper title='HLP' loading={false} data={formattedData} controls={controls}>
+    <ChartWrapper
+      title='HLP'
+      loading={false}
+      data={formattedData}
+      controls={controls}
+      isMobile={isMobile}
+    >
       <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
         <ComposedChart data={dataMode === 'PNL' ? formattedHlpPnL : formattedData}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />
@@ -356,21 +365,19 @@ export default function Hlp() {
         )}
       </Box>
       <Box w='100%' mt='3'>
-        {dataMode === 'PNL' && (
-          <Text color='#bbb'>PNL over time</Text>
-        )}
+        {dataMode === 'PNL' && <Text color='#bbb'>PNL over time</Text>}
       </Box>
 
       <Box w='100%' mt='3'>
         {dataMode === 'HEDGED' && (
-          <Text color='#bbb'>Hedged PNL over time. Hedge the previous day's position and add to today's PNL.</Text>
+          <Text color='#bbb'>
+            Hedged PNL over time. Hedge the previous day's position and add to today's PNL.
+          </Text>
         )}
       </Box>
 
       <Box w='100%' mt='3'>
-        {dataMode === 'NET' && (
-          <Text color='#bbb'>Net notional position over time</Text>
-        )}
+        {dataMode === 'NET' && <Text color='#bbb'>Net notional position over time</Text>}
       </Box>
     </ChartWrapper>
   );

diff --git a/components/home/charts/liquidator.tsx b/components/home/charts/liquidator.tsx
@@ -12,6 +12,7 @@ import {
 } from 'recharts';
 import { useEffect, useState } from 'react';
 import { useRequest } from '@/hooks/useRequest';
+import { useIsMobile } from '@/hooks/isMobile';
 import { Box, Text, useMediaQuery } from '@chakra-ui/react';
 import ChartWrapper from '../../common/chartWrapper';
 import {
@@ -50,7 +51,7 @@ const REQUESTS = [
 ];
 
 export default function LiquidatorChart() {
-  const [isMobile] = useMediaQuery('(max-width: 700px)');
+  const [isMobile] = useIsMobile();
 
   const [dataMode, setDataMode] = useState<'COINS' | 'MARGIN' | 'PNL'>('COINS');
   const [formattedDataCoins, setFormattedDataCoins] = useState<any[]>([]);
@@ -304,6 +305,7 @@ export default function LiquidatorChart() {
       data={dataModeToData(dataMode)}
       controls={controls}
       zIndex={7}
+      isMobile={isMobile}
     >
       <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
         <ComposedChart data={dataModeToData(dataMode)} syncId='liquidatorSync'>

diff --git a/components/home/charts/liquidity.tsx b/components/home/charts/liquidity.tsx
@@ -12,6 +12,7 @@ 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 { useIsMobile } from '@/hooks/isMobile';
 import { CHART_HEIGHT } from '../../../constants';
 import {
   tooltipFormatter,
@@ -25,7 +26,8 @@ import { liquidity_by_coin } from '../../../constants/api';
 const REQUESTS = [liquidity_by_coin];
 
 export default function Liquidity() {
-  const [isMobile] = useMediaQuery('(max-width: 700px)');
+  const [isMobile] = useIsMobile();
+
   const [formattedData0, setFormattedData0] = useState<any[]>([]);
   const [formattedData1000, setFormattedData1000] = useState<any[]>([]);
   const [formattedData3000, setFormattedData3000] = useState<any[]>([]);
@@ -87,12 +89,12 @@ export default function Liquidity() {
   };
 
   const extractCoins = (data: InputData): string[] => {
-    let coins = []; 
+    let coins = [];
     for (let coin of Object.keys(data)) {
-      coins.push(coin); 
+      coins.push(coin);
     }
-    return coins; 
-  }
+    return coins;
+  };
 
   const transformData = (data: InputData): OutputData => {
     // Filter data for each category by top 10 coins
@@ -171,8 +173,8 @@ export default function Liquidity() {
   };
 
   const formatData = () => {
-    const extractedCoinKeys = extractCoins(dataLiqudity); 
-    setCoinKeys(extractedCoinKeys); 
+    const extractedCoinKeys = extractCoins(dataLiqudity);
+    setCoinKeys(extractedCoinKeys);
     const formattedData = transformData(dataLiqudity);
     setFormattedData0(formattedData.median_slippage_0);
     setFormattedData1000(formattedData.median_slippage_1000);
@@ -182,7 +184,7 @@ export default function Liquidity() {
     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);
@@ -249,6 +251,7 @@ export default function Liquidity() {
       controls={controls}
       zIndex={8}
       coinSelectors={coinSelectors}
+      isMobile={isMobile}
     >
       <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
         <LineChart data={chartData}>

diff --git a/components/home/charts/open-interest.tsx b/components/home/charts/open-interest.tsx
@@ -22,11 +22,12 @@ import {
 } from '../../../helpers';
 import { getTokenHex } from '../../../constants/tokens';
 import { open_interest } from '../../../constants/api';
+import { useIsMobile } from '@/hooks/isMobile';
 
 const REQUESTS = [open_interest];
 
 export default function VolumeChart() {
-  const [isMobile] = useMediaQuery('(max-width: 700px)');
+  const [isMobile] = useIsMobile();
 
   const [coinKeys, setCoinKeys] = useState<any[]>([]);
   const [formattedData, setFormattedData] = useState<any[]>([]);
@@ -125,7 +126,7 @@ export default function VolumeChart() {
   }, [loading]);
 
   return (
-    <ChartWrapper title='Open Interest' loading={loading} data={formattedData}>
+    <ChartWrapper title='Open Interest' loading={loading} data={formattedData} isMobile={isMobile}>
       <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
         <LineChart data={formattedData}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />

diff --git a/components/home/charts/retail-volume.tsx b/components/home/charts/retail-volume.tsx
@@ -34,6 +34,7 @@ import {
   daily_usd_volume_by_crossed,
   daily_usd_volume_by_user,
 } from '../../../constants/api';
+import { useIsMobile } from '@/hooks/isMobile';
 
 const REQUESTS = [
   cumulative_usd_volume,
@@ -44,7 +45,8 @@ const REQUESTS = [
 ];
 
 export default function RetailVolumeChart() {
-  const [isMobile] = useMediaQuery('(max-width: 700px)');
+  const [isMobile] = useIsMobile();
+
   const [dataMode, setDataMode] = useState<'COINS' | 'MARGIN'>('COINS');
   const [formattedDataCoins, setFormattedDataCoins] = useState<any[]>([]);
   const [formattedDataMargin, setFormattedDataMargin] = useState<any[]>([]);
@@ -255,6 +257,7 @@ export default function RetailVolumeChart() {
       data={dataMode === 'COINS' ? formattedDataCoins : formattedDataMargin}
       zIndex={9}
       controls={controls}
+      isMobile={isMobile}
     >
       <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
         <ComposedChart

diff --git a/components/home/charts/trader-profit.tsx b/components/home/charts/trader-profit.tsx
@@ -23,11 +23,12 @@ import {
   tooltipFormatterCurrency,
   tooltipFormatterDate,
 } from '../../../helpers';
+import { useIsMobile } from '@/hooks/isMobile';
 
 const REQUESTS = [cumulative_user_pnl, user_pnl];
 
 export default function TradersProfitLossChart() {
-  const [isMobile] = useMediaQuery('(max-width: 700px)');
+  const [isMobile] = useIsMobile();
 
   const [data, setData] = useState<any>(null);
   const [dataCumulativeUserPNL, loadingCumulativeUserPNL, errorCumulativeUserPNL] = useRequest(
@@ -101,7 +102,12 @@ export default function TradersProfitLossChart() {
   }, [loading, error]);
 
   return (
-    <ChartWrapper title='Traders Net PnL' loading={loading} data={data ? data.data : []}>
+    <ChartWrapper
+      title='Traders Net PnL'
+      loading={loading}
+      data={data ? data.data : []}
+      isMobile={isMobile}
+    >
       <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
         <ComposedChart data={data ? data.data : []}>
           <CartesianGrid strokeDasharray='15 15' opacity={0.1} />