From 54af454599858778cfe08793e904a97f0c0a8bee Mon Sep 17 00:00:00 2001 From: tradermohamed Date: Thu, 3 Aug 2023 16:23:47 -0400 Subject: [PATCH 1/6] clean up --- components/common/chartWrapper/index.tsx | 48 +++++++++++---------- components/home/charts/hlp.tsx | 5 ++- components/home/charts/liquidity.tsx | 36 ++-------------- components/home/tables/user-trade-count.tsx | 3 +- constants/tokens.ts | 1 - helpers/utils.ts | 1 - hooks/useIsMobile.ts | 2 +- styles/theme.ts | 3 +- 8 files changed, 36 insertions(+), 63 deletions(-) diff --git a/components/common/chartWrapper/index.tsx b/components/common/chartWrapper/index.tsx index d0effa3..dbb4450 100644 --- a/components/common/chartWrapper/index.tsx +++ b/components/common/chartWrapper/index.tsx @@ -120,8 +120,29 @@ function ChartWrapper({ title, loading, controls, zIndex, coinSelectors, childre ); + const menu = ( + + {isMobile ? ( + + {controlButtons} + {coinSelectorsMenu} + + ) : ( + + {controlButtons} + {coinSelectorsMenu} + + )} + + ); + return ( - + - + {title} - - {isMobile ? ( - - {controlButtons} - {coinSelectorsMenu} - - ) : ( - <> - {controlButtons} - {coinSelectorsMenu} - - )} - - + {menu} + {loading && } {children} diff --git a/components/home/charts/hlp.tsx b/components/home/charts/hlp.tsx index 18b8531..631bcc2 100644 --- a/components/home/charts/hlp.tsx +++ b/components/home/charts/hlp.tsx @@ -302,6 +302,7 @@ export default function Hlp() { stroke={BRIGHT_GREEN} dataKey='hedged_cumulative_pnl' name='Cumulative PnL' + dot={false} /> {dataMode === 'HEDGED' && ( - Hedged PNL over time. Hedge the previous day's position and add to today's - PNL. + Hedge each day's returns by holding the previous day's ending positions for + each asset. )} diff --git a/components/home/charts/liquidity.tsx b/components/home/charts/liquidity.tsx index ebf49e6..5e4b79c 100644 --- a/components/home/charts/liquidity.tsx +++ b/components/home/charts/liquidity.tsx @@ -31,16 +31,14 @@ export default function Liquidity(props: any) { const [formattedData0, setFormattedData0] = useState([]); const [formattedData1000, setFormattedData1000] = useState([]); - const [formattedData3000, setFormattedData3000] = useState([]); const [formattedData10000, setFormattedData10000] = useState([]); const [coinKeys, setCoinKeys] = 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 [dataMode, setDataMode] = useState<'0' | '1000' | '10000'>('0'); const [coinsSelected, setCoinsSelected] = useState(initialTokensSelected); const [dataLiqudity, loadingLiqudity, errorLiqudity] = useRequest(REQUESTS[0], [], 'chart_data'); @@ -59,11 +57,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 +69,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 +77,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 }[]; }; @@ -130,23 +121,19 @@ 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); }); } @@ -154,16 +141,12 @@ export default function Liquidity(props: any) { 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()), }; }; 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(); data.forEach((record) => { @@ -182,16 +165,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,24 +186,16 @@ 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 ( - Largest Trade Count by Users + Largest Trade Count By Users diff --git a/constants/tokens.ts b/constants/tokens.ts index af9d239..2d9321a 100644 --- a/constants/tokens.ts +++ b/constants/tokens.ts @@ -1,7 +1,6 @@ import * as CryptoJS from 'crypto-js'; export const initialTokensSelected = [ - 'APE', 'ARB', 'ATOM', 'AVAX', diff --git a/helpers/utils.ts b/helpers/utils.ts index 792900b..2dd6abf 100644 --- a/helpers/utils.ts +++ b/helpers/utils.ts @@ -1,4 +1,3 @@ -import { SetStateAction } from 'react'; import { CoinSelector } from '../components/common/chartWrapper'; const coinSelectorsSort = (a: CoinSelector, b: CoinSelector) => { diff --git a/hooks/useIsMobile.ts b/hooks/useIsMobile.ts index 2081d7f..793f162 100644 --- a/hooks/useIsMobile.ts +++ b/hooks/useIsMobile.ts @@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'; export function useIsMobile() { const [isMobile, setIsMobile] = useState(true); const handleWindowResize = () => { - setIsMobile(window.innerWidth < 700); + setIsMobile(window.innerWidth < 900); }; useEffect(() => { diff --git a/styles/theme.ts b/styles/theme.ts index ced7f11..d7229e8 100644 --- a/styles/theme.ts +++ b/styles/theme.ts @@ -1,5 +1,4 @@ import { extendTheme, ThemeConfig } from '@chakra-ui/react'; -import { createBreakpoints } from '@chakra-ui/theme-tools'; import Button from './components/button'; import Progress from './components/progress'; import Text from './components/text'; @@ -20,7 +19,7 @@ const breakpoints = { sm: '576px', md: '768px', lg: '992px', - xl: '1500px', + xl: '1400px', xxl: '2400px', }; From ee8a8f159c844f9958ab2208bb132d209ed3d63d Mon Sep 17 00:00:00 2001 From: tradermohamed Date: Thu, 3 Aug 2023 17:00:16 -0400 Subject: [PATCH 2/6] fix slippage chart --- components/home/charts/liquidity.tsx | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/components/home/charts/liquidity.tsx b/components/home/charts/liquidity.tsx index 5e4b79c..b751be7 100644 --- 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, @@ -103,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 } @@ -138,10 +133,20 @@ export default function Liquidity(props: any) { }); } + 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_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) + ), }; }; @@ -238,6 +243,7 @@ export default function Liquidity(props: any) { stroke={getTokenColor(coinName.toString())} key={i} dot={false} + connectNulls /> ); })} From 7a4df50e1232a9a3dde854f97b73672696d97fa2 Mon Sep 17 00:00:00 2001 From: tradermohamed Date: Thu, 3 Aug 2023 17:34:36 -0400 Subject: [PATCH 3/6] more clean up --- components/common/chartWrapper/index.tsx | 51 ++++++------------------ 1 file changed, 13 insertions(+), 38 deletions(-) diff --git a/components/common/chartWrapper/index.tsx b/components/common/chartWrapper/index.tsx index dbb4450..b4ccff2 100644 --- a/components/common/chartWrapper/index.tsx +++ b/components/common/chartWrapper/index.tsx @@ -121,24 +121,10 @@ function ChartWrapper({ title, loading, controls, zIndex, coinSelectors, childre ); const menu = ( - - {isMobile ? ( - - {controlButtons} - {coinSelectorsMenu} - - ) : ( - - {controlButtons} - {coinSelectorsMenu} - - )} - + + {isMobile && controls ? controlButtons : {controlButtons}} + {coinSelectorsMenu} + ); return ( @@ -149,29 +135,18 @@ function ChartWrapper({ title, loading, controls, zIndex, coinSelectors, childre bg='#0f2e29' boxShadow='0px 0px 7px rgb(0 0 0 / 20%)' borderRadius={{ xs: '0', md: '2xl' }} - zIndex={zIndex} + zIndex={zIndex} > - - + - - {title} - - + {title} + {menu} - + {loading && } {children} From 8d71fa113db7ac588bc3b432bbef7cc4506455bf Mon Sep 17 00:00:00 2001 From: tradermohamed Date: Thu, 3 Aug 2023 17:43:25 -0400 Subject: [PATCH 4/6] fix --- components/common/chartWrapper/index.tsx | 34 +++++++++++++----------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/components/common/chartWrapper/index.tsx b/components/common/chartWrapper/index.tsx index b4ccff2..c357876 100644 --- 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 && ( - + - {isMobile && controls ? controlButtons : {controlButtons}} + + + {isMobile && controls ? ( + controlButtons + ) : ( + {controlButtons} + )} {coinSelectorsMenu} + ); return ( @@ -135,18 +141,14 @@ function ChartWrapper({ title, loading, controls, zIndex, coinSelectors, childre bg='#0f2e29' boxShadow='0px 0px 7px rgb(0 0 0 / 20%)' borderRadius={{ xs: '0', md: '2xl' }} - zIndex={zIndex} + zIndex={zIndex} > - - + + {title} {menu} - + {loading && } {children} From 448704c3826fa25831d7d8af6ef42e0e41e1f8df Mon Sep 17 00:00:00 2001 From: tradermohamed Date: Thu, 3 Aug 2023 17:52:47 -0400 Subject: [PATCH 5/6] change responsive container width to 99 --- components/home/charts/cumulative-inflow.tsx | 2 +- components/home/charts/cumulative-users.tsx | 2 +- components/home/charts/fees.tsx | 2 +- components/home/charts/funding-rate.tsx | 2 +- components/home/charts/hlp.tsx | 2 +- components/home/charts/liquidator.tsx | 2 +- components/home/charts/liquidity.tsx | 2 +- components/home/charts/open-interest.tsx | 2 +- components/home/charts/retail-volume.tsx | 2 +- components/home/charts/trader-profit.tsx | 2 +- components/home/charts/unique-users-coin.tsx | 2 +- components/home/charts/volume-num-trades.tsx | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) diff --git a/components/home/charts/cumulative-inflow.tsx b/components/home/charts/cumulative-inflow.tsx index 5357cb3..4416476 100644 --- a/components/home/charts/cumulative-inflow.tsx +++ b/components/home/charts/cumulative-inflow.tsx @@ -97,7 +97,7 @@ export default function CumulativeInflow() { return ( - + - + - + - + - + - + - + - + - + - + - + - + Date: Thu, 3 Aug 2023 18:36:25 -0400 Subject: [PATCH 6/6] fix currency --- helpers/index.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/helpers/index.ts b/helpers/index.ts index bd54990..9abb108 100644 --- a/helpers/index.ts +++ b/helpers/index.ts @@ -63,16 +63,19 @@ interface FormatNumberOpts { export const formatNumberWithOptions = (value: number, opts: FormatNumberOpts = {}): string => { const currency = !!opts.currency; const compact = !!opts.compact; + const sign = value < 0 ? '-' : ''; + const absoluteValue = Math.abs(value); if (currency && !compact) { - return getCurrencyFormatBasedOnValue(value).format(value); + return sign + getCurrencyFormatBasedOnValue(absoluteValue).format(absoluteValue); } const display = compact - ? formatNumberToCompactForm(value) - : getNumberFormatBasedOnValue(value).format(value); + ? formatNumberToCompactForm(absoluteValue) + : getNumberFormatBasedOnValue(absoluteValue).format(absoluteValue); + if (currency) { - return `$${display}`; + return `${sign}$${display}`; } return display; };