chore(store): fix zustand and remove providers (#2)

zer0-os · Jun 20, 2024 · 3748f50 · 3748f50
1 parent 07cc619
commit 3748f50
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 46 deletions.
diff --git 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
@@ -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 (
         <div className="section">
             <h2 id="zero-meow">MEOW</h2>            
             <div className="zero-meow">
                 <div className="cards">
-                    <Card title="Token Price" value={formatUSD(chartData[0]?.price) || 0} isLoading={isLoadingChart} />
-                    <Card title="Volume" value={formatUSD(getVolume(pairData, filter))} isLoading={isLoadingPairData} />
+                    <Card title="Token Price" value={formatUSD(chartData[0]?.price) || 0} isLoading={isLoadingChart} />                    
                     <Card title="Holders" value={meowHolders} isLoading={isLoadingPairData} />
                 </div>
                 <div className="charts">

diff --git 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 = () => {
                             </div>
                             <div className="chart-container">
                                 <h3>Total Rewards Earned</h3>
-                                <Chart data={zosData} dataKey="totalRewardsEarned" chartType="line" />
+                            <Chart data={rewardsData} dataKey="totalRewardsEarned" chartType="area" />
                             </div>
                         </div>
                     </div>

diff --git 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<FiltersProps> = ({ setFilter }) => {
     const [customDateRange, setCustomDateRange] = useState<[Date | null, Date | null]>([null, null]);
     const [startDate, endDate] = customDateRange;
@@ -43,7 +44,7 @@ const Filters: React.FC<FiltersProps> = ({ 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
@@ -29,11 +29,9 @@ export default function RootLayout({
       <head>        
         <link rel="icon" href="/logo-zero.png" sizes="any" />        
       </head>
-      <body className={inter.className} suppressHydrationWarning={true}>
-        <Providers>
+      <body className={inter.className} suppressHydrationWarning={true}>        
           <ErrorBoundary>{children}
-          </ErrorBoundary>
-        </Providers>
+          </ErrorBoundary>        
       </body>
     </html>
   );

diff --git a/src/app/store/useDashboardStore.ts b/src/app/store/useDashboardStore.ts
@@ -23,14 +23,15 @@ interface DashboardState {
         totalRewardsEarned: string;
         dayCount: number;
     };
+    rewardsData: { date: string; totalRewardsEarned: number }[];
     tokenPriceInUSD: number | null;
     meowHolders: number | string;
     isLoadingDashboard: boolean;
     isLoadingZns: boolean;
     isLoadingPairData: boolean;
     setFilter: (filter: string) => void;
     setData: (data: DataPoint[]) => void;
-    setZosData: (data: MetricsData[]) => void;    
+    setZosData: (data: MetricsData[]) => void;
     fetchDashboardData: (fromDate: string, toDate: string) => Promise<void>;
     fetchTotals: (filter: string) => Promise<void>;
     fetchDashboardDataByFilter: (filter: string) => Promise<void>;
@@ -46,7 +47,7 @@ const fetchAllData = async (fromDate: string, toDate: string): Promise<MetricsDa
     return await response.json();
 };
 
-const fetchCurrentTokenPriceInUSD = async (): Promise<number> => {
+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<number> => {
     };
 };
 
-
 const fetchPairDataFromAPI = async (): Promise<any> => {
-    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<DashboardState>((set, get) => ({
         totalRewardsEarned: '0',
         dayCount: 0,
     },
+    rewardsData: [],
     tokenPriceInUSD: null,
     meowHolders: 0,
     isLoadingDashboard: false,
@@ -100,8 +101,8 @@ const useDashboardStore = create<DashboardState>((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<DashboardState>((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<DashboardState>((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<DashboardState>((set, get) => ({
                 zosData: data,
                 zosDataCache: { ...state.zosDataCache, [`${fromDate}_${toDate}`]: data },
                 totals,
+                rewardsData,
                 isLoadingDashboard: false,
             }));
         } catch (error) {
@@ -227,7 +232,6 @@ const useDashboardStore = create<DashboardState>((set, get) => ({
         }
     },
 
-
     fetchTotals: async (filter: string) => {
         try {
             const response = await fetch(`/api/domains?range=${filter}`);