From 123ae37b22a0ab5c8ddccdcec97215ea59676208 Mon Sep 17 00:00:00 2001
From: Nicholas Barnett <n-barnett@hotmail.com>
Date: Wed, 22 Jan 2025 16:18:04 -0600
Subject: [PATCH] fix: fixed some hydration issues

---
 src/app/search/filters/Address.tsx          |  2 +-
 src/app/search/filters/Date.tsx             |  2 +-
 src/app/transactions/MempoolFeePieChart.tsx | 72 +++++++++++++--------
 src/app/transactions/MempoolFeeStats.tsx    |  2 +-
 4 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/src/app/search/filters/Address.tsx b/src/app/search/filters/Address.tsx
index 1ac0895df..295e9f41c 100644
--- a/src/app/search/filters/Address.tsx
+++ b/src/app/search/filters/Address.tsx
@@ -39,7 +39,7 @@ export function AddressFilter({
       open={open}
       onOpenChange={e => setOpen(e.open)}
     >
-      <PopoverTrigger>
+      <PopoverTrigger asChild>
         <Button
           variant="secondary"
           fontSize={'sm'}
diff --git a/src/app/search/filters/Date.tsx b/src/app/search/filters/Date.tsx
index 4baf39080..de0d66306 100644
--- a/src/app/search/filters/Date.tsx
+++ b/src/app/search/filters/Date.tsx
@@ -81,7 +81,7 @@ export function DateFilter({ defaultStartTime, defaultEndTime }: DateFilterProps
       open={open}
       onOpenChange={e => setOpen(e.open)}
     >
-      <PopoverTrigger>
+      <PopoverTrigger asChild>
         <Button
           variant={'secondary'}
           fontSize={'sm'}
diff --git a/src/app/transactions/MempoolFeePieChart.tsx b/src/app/transactions/MempoolFeePieChart.tsx
index 4a7327f41..0d0162de3 100644
--- a/src/app/transactions/MempoolFeePieChart.tsx
+++ b/src/app/transactions/MempoolFeePieChart.tsx
@@ -1,3 +1,5 @@
+import { SkeletonCircle } from '@/components/ui/skeleton';
+import { ClientOnly, Flex } from '@chakra-ui/react';
 import { Cell, Pie, PieChart } from 'recharts';
 
 const pieChartWidth = 215;
@@ -95,33 +97,47 @@ export function MempoolFeePieChart({
     });
 
   return (
-    <PieChart width={pieChartWidth} height={pieChartHeight}>
-      <Pie
-        paddingAngle={3}
-        startAngle={0}
-        data={pieData}
-        dataKey="value"
-        nameKey="name"
-        cx="50%"
-        cy="50%"
-        labelLine={false}
-        label={props =>
-          renderCustomizedLabel({
-            ...props,
-          })
-        }
-        innerRadius={60}
-        outerRadius={67}
-      >
-        {pieData.map((entry, index) => (
-          <Cell key={`cell-${index}`} fill={getTxTypePieChartColor(entry.name)} stroke="none" />
-        ))}
-      </Pie>
-      {renderCenterCustomizedLabel({
-        label: `${totalTxCount} tx`,
-        cx: pieChartWidth / 2,
-        cy: pieChartHeight / 2,
-      })}
-    </PieChart>
+    <ClientOnly
+      fallback={
+        <Flex
+          justifyContent="center"
+          alignItems="center"
+          width={pieChartWidth}
+          height={pieChartHeight}
+        >
+          <SkeletonCircle width={134} height={134} />
+        </Flex>
+      }
+    >
+      <PieChart width={pieChartWidth} height={pieChartHeight} id="mempool-fee-pie-chart">
+        <Pie
+          paddingAngle={3}
+          startAngle={0}
+          data={pieData}
+          dataKey="value"
+          nameKey="name"
+          cx="50%"
+          cy="50%"
+          labelLine={false}
+          label={props =>
+            renderCustomizedLabel({
+              ...props,
+            })
+          }
+          innerRadius={60}
+          outerRadius={67}
+        >
+          {pieData &&
+            pieData.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={getTxTypePieChartColor(entry.name)} stroke="none" />
+            ))}
+        </Pie>
+        {renderCenterCustomizedLabel({
+          label: `${totalTxCount} tx`,
+          cx: pieChartWidth / 2,
+          cy: pieChartHeight / 2,
+        })}
+      </PieChart>
+    </ClientOnly>
   );
 }
diff --git a/src/app/transactions/MempoolFeeStats.tsx b/src/app/transactions/MempoolFeeStats.tsx
index 937b6591b..3b1068101 100644
--- a/src/app/transactions/MempoolFeeStats.tsx
+++ b/src/app/transactions/MempoolFeeStats.tsx
@@ -272,7 +272,7 @@ export function MempoolFeeStats({ tokenPrice }: { tokenPrice: TokenPrice }) {
               const bg = getTxTypePieChartColor(key);
 
               return (
-                <Flex gap={0.5} alignItems={'center'} justifyContent={'center'}>
+                <Flex gap={0.5} alignItems={'center'} justifyContent={'center'} key={key}>
                   <Box h={2.5} w={2.5} borderRadius="50%" mr={2} backgroundColor={bg} />
                   <Icon
                     h={3.5}