diff --git a/src/components/client/TreasuryPage.tsx b/src/components/client/TreasuryPage.tsx index 50c2dbd3..d441e119 100644 --- a/src/components/client/TreasuryPage.tsx +++ b/src/components/client/TreasuryPage.tsx @@ -22,7 +22,7 @@ import { CUSTOM_GRAPH_PERIODS, StakeGraphPeriod } from '@/data/dashboard-data' import { getDateRange } from '@/utils/dashboard-utils' import { useGetTreasuryValueQuery } from '@/services/treasury/graphql' import GraphPeriodButton from '../dashboard/GraphPeriodButton' -import { EmblaOptionsType } from 'embla-carousel-react' +import type { EmblaOptionsType } from 'embla-carousel-react' import Autoplay from 'embla-carousel-autoplay' const TreasuryPage: NextPage = () => { diff --git a/src/components/dashboard/GraphComponent.tsx b/src/components/dashboard/GraphComponent.tsx index a4aa2b6e..b864360f 100644 --- a/src/components/dashboard/GraphComponent.tsx +++ b/src/components/dashboard/GraphComponent.tsx @@ -8,14 +8,14 @@ import { Link, } from '@chakra-ui/react' import { Icon } from '@chakra-ui/react' -import React, { ReactNode } from 'react' +import React, { type ReactNode } from 'react' import { BraindaoLogo } from '../braindao-logo' import { Area, AreaChart, ResponsiveContainer, Tooltip, YAxis } from 'recharts' import CustomTooltip from './CustomTooltip' import * as Humanize from 'humanize-plus' import GraphLine from './GraphLine' import GraphPeriodWrapper from './GraphPeriodWrapper' -import { Dict } from '@chakra-ui/utils' +import type { Dict } from '@chakra-ui/utils' import NextLink from 'next/link' const GraphComponent = ({ diff --git a/src/components/dashboard/GraphDetails.tsx b/src/components/dashboard/GraphDetails.tsx index b0b4d62d..2d882458 100644 --- a/src/components/dashboard/GraphDetails.tsx +++ b/src/components/dashboard/GraphDetails.tsx @@ -23,7 +23,7 @@ import { StakeGraphPeriod, } from '@/data/dashboard-data' import { getDateRange, renderPercentChange } from '@/utils/dashboard-utils' -import { +import type { ChartDataType, OnPieEnter, ChartConstantNonTreasury, @@ -48,10 +48,11 @@ export const DashboardGraphData = () => { const [holders, setHolders] = useState([]) const [colorData, setColorData] = useState({}) const [activeIndex, setActiveIndex] = useState(0) + const [treasuryGraphPeriod, setTreasuryGraphPeriod] = useState( + StakeGraphPeriod['30DAYS'], + ) - const { value, getRadioProps } = useRadioGroup({ - defaultValue: GraphPeriod.MONTH, - }) + const { data: iqData } = useGetIqPriceQuery('IQ') const { value: stakeValue, @@ -61,20 +62,35 @@ export const DashboardGraphData = () => { defaultValue: StakeGraphPeriod['30DAYS'], }) - const { startDate, endDate } = getDateRange(stakeValue as string) + const { value, getRadioProps } = useRadioGroup({ + defaultValue: GraphPeriod.MONTH, + }) + + const { + getRadioProps: getTreasuryRadioProps, + getRootProps: getTreasuryRootProps, + } = useRadioGroup({ + defaultValue: StakeGraphPeriod['30DAYS'], + onChange: (value) => setTreasuryGraphPeriod(value as StakeGraphPeriod), + }) + + const { startDate: treasuryStartDate, endDate: treasuryEndDate } = + getDateRange(treasuryGraphPeriod) const { data: treasuryData } = useGetTreasuryValueQuery({ - startDate, - endDate, + startDate: treasuryStartDate, + endDate: treasuryEndDate, }) + const { startDate, endDate } = getDateRange(stakeValue as string) + const { data: stakeData } = useGetStakeValueQuery({ startDate, endDate, }) const treasuryGraphData = treasuryData?.map((dt) => ({ - amt: parseFloat(dt.totalValue), + amt: Number.parseFloat(dt.totalValue), name: new Date(dt.created).toISOString().slice(0, 10), })) @@ -83,13 +99,11 @@ export const DashboardGraphData = () => { ) const stakeGraphData = stakeData?.map((dt) => ({ - amt: parseFloat(dt.amount), + amt: Number.parseFloat(dt.amount), name: new Date(dt.created).toISOString().slice(0, 10), })) - const { data: iqData } = useGetIqPriceQuery('IQ') const rate = iqData?.response?.data?.[0]?.quote?.USD?.price || 0.0 - const priceChange = { [GraphPeriod.DAY]: marketData?.percent_change_24h, [GraphPeriod.WEEK]: marketData?.percent_change_7d, @@ -107,11 +121,6 @@ export const DashboardGraphData = () => { [setActiveIndex], ) - const { getRadioProps: getTokenRadioProps, getRootProps: getTokenRootProps } = - useRadioGroup({ - defaultValue: StakeGraphPeriod['30DAYS'], - }) - const { boxSize, spacing, radius } = useBoxSizes() const { colorMode } = useColorMode() @@ -121,13 +130,6 @@ export const DashboardGraphData = () => { return renderPercentChange(percentChange)?.[0] } - if (treasuryValue && treasuryGraphData) { - treasuryGraphData[treasuryGraphData.length - 1] = { - amt: treasuryValue, - name: treasuryGraphData[treasuryGraphData.length - 1]?.name, - } - } - useEffect(() => { const fetchTreasuryValue = async () => { if (!isTokenFetched.current) { @@ -160,6 +162,13 @@ export const DashboardGraphData = () => { getHiIQHolders() }, []) + if (treasuryValue && treasuryGraphData) { + treasuryGraphData[treasuryGraphData.length - 1] = { + amt: treasuryValue, + name: treasuryGraphData[treasuryGraphData.length - 1]?.name, + } + } + return ( @@ -293,7 +302,7 @@ export const DashboardGraphData = () => { { btn.period === StakeGraphPeriod['1Y'] || btn.period === StakeGraphPeriod.ALL } - {...getTokenRadioProps({ value: btn.period })} + {...getTreasuryRadioProps({ value: btn.period })} /> ) })} diff --git a/src/services/treasury/graphql/index.ts b/src/services/treasury/graphql/index.ts index 98ce0a03..94d9713f 100644 --- a/src/services/treasury/graphql/index.ts +++ b/src/services/treasury/graphql/index.ts @@ -3,7 +3,7 @@ import { HYDRATE } from 'next-redux-wrapper' import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query' import config from '@/config' import { DAILY_TREASURY } from '../queries' -import { QueryParams } from '@/types/service' +import type { QueryParams } from '@/types/service' type GetTreasuryResponse = { dailyTreasury: { created: string; totalValue: string }[]