Merge mobile changes (#12)

* updated bar charts and colors * put coin selector sort in a util file
hyperliquid-dex · Aug 2, 2023 · e89f4d1 · e89f4d1
1 parent 3184ff1
commit e89f4d1
Show file tree

Hide file tree

Showing 19 changed files with 331 additions and 293 deletions.
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 {
@@ -19,13 +20,15 @@ import {
   formatterPercent,
   tooltipFormatterDate,
 } from '../../../helpers';
-import { getTokenHex } from '../../../constants/tokens';
+import { createCoinSelectors } from "../../../helpers/utils"; 
+
+import { getTokenColor, initialTokensSelected } from '../../../constants/tokens';
 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[]>([]);
@@ -34,7 +37,7 @@ export default function FundingRate() {
     [],
     'chart_data'
   );
-  const [coinsSelected, setCoinsSelected] = useState<string[]>(['ETH', 'BTC', 'ARB']);
+  const [coinsSelected, setCoinsSelected] = useState<string[]>(initialTokensSelected);
 
   const loading = loadingFundingRate;
   const error = errorFundingRate;
@@ -113,41 +116,15 @@ export default function FundingRate() {
     }
   }, [loading, coinsSelected]);
 
-  const coinSelectorsSort = (a: CoinSelector, b: CoinSelector) => {
-    if (a.isChecked !== b.isChecked) {
-      return a.isChecked ? -1 : 1;
-    }
-    return a.name.localeCompare(b.name);
-  };
-
-  const coinSelectors = coinKeys
-    .map((coinKey: string) => {
-      return {
-        name: coinKey,
-        event: () =>
-          setCoinsSelected((coinsSelected) => {
-            let newCoinsSelected = coinsSelected;
-            if (coinsSelected.includes(coinKey)) {
-              newCoinsSelected = coinsSelected.filter((e) => {
-                return e !== coinKey;
-              });
-            } else {
-              newCoinsSelected.push(coinKey);
-            }
-            formatData();
-            return newCoinsSelected;
-          }),
-        isChecked: coinsSelected.includes(coinKey),
-      };
-    })
-    .sort((a: CoinSelector, b: CoinSelector) => coinSelectorsSort(a, b));
+  const coinSelectors = createCoinSelectors(coinKeys, coinsSelected, setCoinsSelected, formatData)
 
   return (
     <ChartWrapper
       title='Annualized Funding Rate'
       loading={loading}
       data={formattedData}
       coinSelectors={coinSelectors}
+      isMobile={isMobile}
     >
       <ResponsiveContainer width='100%' height={CHART_HEIGHT}>
         <LineChart data={formattedData}>
@@ -189,7 +166,7 @@ export default function FundingRate() {
                 dataKey={coinName.toString()}
                 dot={false}
                 name={coinName.toString()}
-                stroke={getTokenHex(coinName.toString())}
+                stroke={getTokenColor(coinName.toString())}
                 key={'funding-rate-line-' + i}
               />
             );

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 {
@@ -22,14 +24,16 @@ import {
   yaxisFormatter,
   tooltipFormatterLongShort,
 } from '../../../helpers';
-import { getTokenHex } from '@/constants/tokens';
+
+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];
 
 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 +86,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 +132,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 +148,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 +241,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} />
@@ -295,7 +305,7 @@ export default function Hlp() {
                   dataKey={coin}
                   stackId='a'
                   name={coin.toString()}
-                  fill={getTokenHex(coin.toString())}
+                  fill={getTokenColor(coin.toString())}
                   key={i}
                   maxBarSize={20}
                 />
@@ -356,21 +366,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>
   );