From c6de287cd3b768c5c4873dff7ed6dcd18e7de361 Mon Sep 17 00:00:00 2001
From: Birdgg <birdeggegg@gmail.com>
Date: Mon, 22 May 2023 20:43:14 +0800
Subject: [PATCH] fix: react virtuoso error and BlockchainInfo unique key error
 (#571)

---
 src/components/common/BlockchainInfo.tsx | 8 ++++----
 src/components/common/Comment.tsx        | 6 +++++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/common/BlockchainInfo.tsx b/src/components/common/BlockchainInfo.tsx
index 1e83faa0..7b02a0d8 100644
--- a/src/components/common/BlockchainInfo.tsx
+++ b/src/components/common/BlockchainInfo.tsx
@@ -71,14 +71,14 @@ export const BlockchainInfo: React.FC<{
                       <>
                         <BlockchainInfoLink
                           href={`${CSB_SCAN}/tx/${page?.transactionHash}`}
-                          key={page?.transactionHash}
+                          key={`create_${page?.transactionHash}`}
                         >
                           {t("Creation")} {page?.transactionHash.slice(0, 10)}
                           ...{page?.transactionHash.slice(-10)}
                         </BlockchainInfoLink>
                         <BlockchainInfoLink
                           href={`${CSB_SCAN}/tx/${page?.updatedTransactionHash}`}
-                          key={page?.updatedTransactionHash}
+                          key={`update_${page?.updatedTransactionHash}`}
                         >
                           {t("Last Update")}{" "}
                           {page?.updatedTransactionHash.slice(0, 10)}...
@@ -89,14 +89,14 @@ export const BlockchainInfo: React.FC<{
                       <>
                         <BlockchainInfoLink
                           href={`${CSB_SCAN}/tx/${site?.transactionHash}`}
-                          key={site?.transactionHash}
+                          key={`create_${site?.transactionHash}`}
                         >
                           {t("Creation")} {site?.transactionHash.slice(0, 10)}
                           ...{site?.transactionHash.slice(-10)}
                         </BlockchainInfoLink>
                         <BlockchainInfoLink
                           href={`${CSB_SCAN}/tx/${site?.updatedTransactionHash}`}
-                          key={site?.updatedTransactionHash}
+                          key={`update_${site?.transactionHash}`}
                         >
                           {t("Last Update")}{" "}
                           {site?.updatedTransactionHash.slice(0, 10)}...
diff --git a/src/components/common/Comment.tsx b/src/components/common/Comment.tsx
index 32857495..68ca6e1b 100644
--- a/src/components/common/Comment.tsx
+++ b/src/components/common/Comment.tsx
@@ -25,6 +25,10 @@ export const Comment: React.FC<{
     noteId: page?.noteId,
   })
 
+  const data = comments.data?.pages.filter(
+    (page) => (page?.list?.length ?? 0) > 0,
+  )
+
   return (
     <div
       className={cn("xlog-comment comment", className)}
@@ -51,7 +55,7 @@ export const Comment: React.FC<{
       <Virtuoso
         className="xlog-comment-list"
         useWindowScroll
-        data={comments.data?.pages}
+        data={data}
         endReached={() => comments.hasNextPage && comments.fetchNextPage()}
         components={{
           Footer: comments.isLoading ? Loader : undefined,