fix: Make some content that displays abnormally display normally

Author: dohooo

.changeset/sixty-sloths-add.md

@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Make some content that displays abnormally display normally.

src/components/CommentList.tsx

@@ -148,7 +148,7 @@ export const CommentList = forwardRef<CommentListInstance, Props>((
         }}
         ListFooterComponent={comments.isFetchingNextPage && <Spinner paddingVertical="$5"/>}
         ListEmptyComponent={<EmptyComponent isLoading={comments.isFetching}/>}
-        keyExtractor={item => item.blockNumber?.toString()}
+        keyExtractor={item => item.transactionHash?.toString()}
         renderItem={(options) => {
           const comment = options.item;
           const depth = 0;

src/pages/CharacterList/index.tsx

@@ -77,7 +77,7 @@ export const CharacterListPage: FC<NativeStackScreenProps<RootStackParamList, "C
         }}
         contentContainerStyle={{ paddingBottom: bottom }}
         data={list}
-        keyExtractor={(item: CharacterEntity) => item?.blockNumber?.toString?.()}
+        keyExtractor={item => item?.transactionHash?.toString?.()}
         estimatedItemSize={100}
         estimatedListSize={{
           height: height - top - bottom,

src/pages/PostDetails/BottomSheetLikeList.tsx

@@ -38,7 +38,7 @@ export const BottomSheetLikeList: FC<{
         }}
         contentContainerStyle={{ padding: 20, paddingBottom: bottom }}
         data={data}
-        keyExtractor={item => item?.characterId?.toString()}
+        keyExtractor={item => item?.transactionHash?.toString()}
         ListEmptyComponent={(
           <Stack height={300}>
             {

src/pages/PostDetails/javascript-content.ts

@@ -1,37 +1,7 @@
-const lazyLoadImages = `
-var imagesToBlock = [];
-
-window.addEventListener("load", function() {
-  var restoreImages = function() {
-    for (var i = 0; i < imagesToBlock.length; i++) {
-      imagesToBlock[i].src = imagesToBlock[i].getAttribute("data-src");
-    }
-    imagesToBlock = [];
-  };
-
-  var blockImages = function() {
-    var images = document.getElementsByTagName("img");
-    for (var i = 0; i < images.length; i++) {
-      imagesToBlock.push(images[i]);
-      images[i].setAttribute("data-src", images[i].src);
-      images[i].src = "";
-    }
-  };
-
-  document.addEventListener("DOMContentLoaded", function() {
-    restoreImages();
-  });
-
-  blockImages();
-});
-`;
-
 export const javaScriptContentLoaded = (
   bottomBarHeight: number,
   height: number,
 ) => `
-    ${lazyLoadImages}
-    
     const meta = document.createElement('meta'); 
     meta.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'); 
     meta.setAttribute('name', 'viewport'); 

src/pages/Profile/Comments/index.tsx

@@ -44,7 +44,7 @@ export const CommentsPage: FC<NativeStackScreenProps<RootStackParamList, "Commen
           comments?.fetchNextPage?.();
         }}
         ListFooterComponent={(comments.isFetchingNextPage || (comments.isFetching && flattedComments.length === 0)) && <Spinner paddingBottom="$5"/>}
-        keyExtractor={item => item.transactionHash}
+        keyExtractor={item => item.transactionHash?.toString()}
         renderItem={({ item }) => {
           const type = item.toNote?.metadata?.content?.tags?.[0];
           let toTitle: string;

src/pages/Profile/Notifications/index.tsx

@@ -91,7 +91,7 @@ const NotificationsPage: FC<NativeStackScreenProps<RootStackParamList, "Notifica
       }}>
         <FlashList
           data={data}
-          keyExtractor={item => item.transactionHash}
+          keyExtractor={item => item.transactionHash?.toString?.()}
           ListEmptyComponent={(
             <Stack minHeight={containerHeight - 50}>
               {

src/pages/Replies/index.tsx

@@ -79,14 +79,13 @@ export const RepliesPage: FC<NativeStackScreenProps<RootStackParamList, "Replies
           }}
           ListFooterComponent={(comments.isFetchingNextPage || (comments.isFetching && flattedComments.length === 0)) && <Spinner paddingBottom="$5"/>}
           showsVerticalScrollIndicator={false}
-          keyExtractor={item => item?.data?.blockNumber?.toString()}
+          keyExtractor={item => item?.data?.transactionHash?.toString()}
           renderItem={({ item }) => {
             return (
               <Stack paddingHorizontal={16}>
                 <CommentItem
                   editable
                   commentable
-                  key={item?.data?.blockNumber?.toString()}
                   padding={0}
                   comment={item?.data}
                   depth={item?.depth}