From 3748f50b58d5df007477e58c7e208331fa3a29c5 Mon Sep 17 00:00:00 2001 From: codingsh Date: Thu, 20 Jun 2024 16:35:18 +0200 Subject: [PATCH] chore(store): fix zustand and remove providers (#2) --- package.json | 5 +++ src/app/components/Dashboard/MeowSection.tsx | 35 +++----------------- src/app/components/Dashboard/ZeroGlobal.tsx | 4 +-- src/app/components/Filters/index.tsx | 5 +-- src/app/layout.tsx | 6 ++-- src/app/store/useDashboardStore.ts | 18 ++++++---- 6 files changed, 27 insertions(+), 46 deletions(-) diff --git a/package.json b/package.json index 8e479b4..29778cd 100644 --- a/package.json +++ b/package.json @@ -67,5 +67,10 @@ "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" + }, + "pnpm": { + "overrides": { + "ws@>=8.0.0 <8.17.1": ">=8.17.1" + } } } diff --git a/src/app/components/Dashboard/MeowSection.tsx b/src/app/components/Dashboard/MeowSection.tsx index 34d4a4f..78f3d59 100644 --- a/src/app/components/Dashboard/MeowSection.tsx +++ b/src/app/components/Dashboard/MeowSection.tsx @@ -70,44 +70,17 @@ const MeowSection: React.FC = () => { } fetchChartData('ethereum:0x0ec78ed49c2d27b315d462d43b5bab94d2c79bf8', start, now); - fetchPairData(); - }, [filter, fetchChartData, fetchPairData, fetchTokenPrice]); + //fetchPairData(); + }, [filter, fetchChartData, fetchTokenPrice]); - const getVolume = (pairData: any, filter: string) => { - if (!pairData || pairData.length === 0) return 0; - - switch (filter) { - case '24h': - case 'today': - case 'yesterday': - return pairData[0].one_day_volume; - case '7d': - case 'last_week': - return pairData[0].seven_day_volume; - case '30d': - case 'last_month': - return pairData[0].thirty_day_volume; - case '90d': - return pairData[0].thirty_day_volume * 3; - case '365d': - case 'last_year': - return pairData[0].thirty_day_volume * 12; - default: - if (filter.startsWith('custom')) { - const days = (new Date(filter.split('_')[2]).getTime() - new Date(filter.split('_')[1]).getTime()) / (1000 * 60 * 60 * 24); - return pairData[0].thirty_day_volume / 30 * days; - } - return pairData[0].one_day_volume + pairData[0].seven_day_volume + pairData[0].thirty_day_volume; - } - }; + return (

MEOW

- - +
diff --git a/src/app/components/Dashboard/ZeroGlobal.tsx b/src/app/components/Dashboard/ZeroGlobal.tsx index 055c66e..c90df0f 100644 --- a/src/app/components/Dashboard/ZeroGlobal.tsx +++ b/src/app/components/Dashboard/ZeroGlobal.tsx @@ -5,7 +5,7 @@ import Card from '@/components/Card'; import Loading from '@/components/Loading'; const ZeroGlobal: React.FC = () => { - const { filter, totals, zosData, setFilter, fetchDashboardDataByFilter, isLoadingDashboard } = useDashboardStore(); + const { filter, totals, zosData, setFilter, fetchDashboardDataByFilter, isLoadingDashboard, rewardsData } = useDashboardStore(); useEffect(() => { setFilter('7d'); @@ -43,7 +43,7 @@ const ZeroGlobal: React.FC = () => {

Total Rewards Earned

- +
diff --git a/src/app/components/Filters/index.tsx b/src/app/components/Filters/index.tsx index ea0f2a9..b671467 100644 --- a/src/app/components/Filters/index.tsx +++ b/src/app/components/Filters/index.tsx @@ -1,4 +1,3 @@ -// @ts-nocheck import React, { useState, useEffect } from 'react'; import { format } from 'date-fns'; import DatePicker from 'react-datepicker'; @@ -11,6 +10,8 @@ interface FiltersProps { setFilter: (filter: string) => void; } +Modal.setAppElement('body'); + const Filters: React.FC = ({ setFilter }) => { const [customDateRange, setCustomDateRange] = useState<[Date | null, Date | null]>([null, null]); const [startDate, endDate] = customDateRange; @@ -43,7 +44,7 @@ const Filters: React.FC = ({ setFilter }) => { }; useEffect(() => { - if (selectedOption !== 'custom') { + if (selectedOption && selectedOption !== 'custom') { setFilter(selectedOption); } }, [selectedOption, setFilter]); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ee8af08..a6b15c9 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -29,11 +29,9 @@ export default function RootLayout({ - - + {children} - - + ); diff --git a/src/app/store/useDashboardStore.ts b/src/app/store/useDashboardStore.ts index 319ed44..b1feb49 100644 --- a/src/app/store/useDashboardStore.ts +++ b/src/app/store/useDashboardStore.ts @@ -23,6 +23,7 @@ interface DashboardState { totalRewardsEarned: string; dayCount: number; }; + rewardsData: { date: string; totalRewardsEarned: number }[]; tokenPriceInUSD: number | null; meowHolders: number | string; isLoadingDashboard: boolean; @@ -30,7 +31,7 @@ interface DashboardState { isLoadingPairData: boolean; setFilter: (filter: string) => void; setData: (data: DataPoint[]) => void; - setZosData: (data: MetricsData[]) => void; + setZosData: (data: MetricsData[]) => void; fetchDashboardData: (fromDate: string, toDate: string) => Promise; fetchTotals: (filter: string) => Promise; fetchDashboardDataByFilter: (filter: string) => Promise; @@ -46,7 +47,7 @@ const fetchAllData = async (fromDate: string, toDate: string): Promise => { +const fetchCurrentTokenPriceInUSD = async (): Promise<{ price: number; holders: number }> => { const response = await fetch('/api/meow/token-price'); if (!response.ok) { throw new Error(`Error fetching MEOW price: ${response.statusText}`); @@ -58,9 +59,8 @@ const fetchCurrentTokenPriceInUSD = async (): Promise => { }; }; - const fetchPairDataFromAPI = async (): Promise => { - const response = await fetch('/api/meow/pairs'); + const response = await fetch('/api/meow/pairs'); if (!response.ok) { throw new Error(`Error fetching pair data: ${response.statusText}`); } @@ -86,6 +86,7 @@ const useDashboardStore = create((set, get) => ({ totalRewardsEarned: '0', dayCount: 0, }, + rewardsData: [], tokenPriceInUSD: null, meowHolders: 0, isLoadingDashboard: false, @@ -100,8 +101,8 @@ const useDashboardStore = create((set, get) => ({ fetchTokenPrice: async () => { try { - const info = await fetchCurrentTokenPriceInUSD(); - set({ tokenPriceInUSD: info.price, meowHolders: info.holders }); + const info = await fetchCurrentTokenPriceInUSD(); + set({ tokenPriceInUSD: info.price, meowHolders: info.holders }); } catch (error) { console.error('Error fetching token price:', error); } @@ -129,6 +130,8 @@ const useDashboardStore = create((set, get) => ({ dayCount: 0, }; + const rewardsData: { date: string; totalRewardsEarned: number }[] = []; + const totals = data.reduce((acc, curr) => { acc.dailyActiveUsers += curr.dailyActiveUsers; acc.totalMessagesSent += curr.totalMessagesSent; @@ -137,6 +140,7 @@ const useDashboardStore = create((set, get) => ({ const rewardInEther = parseFloat(formatUnits(BigInt(curr.totalRewardsEarned.amount), curr.totalRewardsEarned.precision)); const rewardInUSD = rewardInEther * tokenPriceInUSD; acc.totalRewardsEarned = (parseFloat(acc.totalRewardsEarned) + rewardInUSD).toString(); + rewardsData.push({ date: curr.date, totalRewardsEarned: rewardInUSD }); acc.dayCount += 1; return acc; }, initialTotals); @@ -148,6 +152,7 @@ const useDashboardStore = create((set, get) => ({ zosData: data, zosDataCache: { ...state.zosDataCache, [`${fromDate}_${toDate}`]: data }, totals, + rewardsData, isLoadingDashboard: false, })); } catch (error) { @@ -227,7 +232,6 @@ const useDashboardStore = create((set, get) => ({ } }, - fetchTotals: async (filter: string) => { try { const response = await fetch(`/api/domains?range=${filter}`);