From c832239a9d9071aae3fefa8fc64ae7c0d3713e4c Mon Sep 17 00:00:00 2001
From: alantoa <toacncom@gmail.com>
Date: Tue, 7 Nov 2023 20:24:15 +0800
Subject: [PATCH] ui improments

---
 .../creator-token/creator-token-users.tsx     |  4 ++--
 .../creator-token/top-creator-token.tsx       |  2 +-
 .../hooks/creator-token/use-creator-tokens.ts | 20 +++++++++++++------
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/app/components/creator-token/creator-token-users.tsx b/packages/app/components/creator-token/creator-token-users.tsx
index c1ac230d4..a6ab8edb5 100644
--- a/packages/app/components/creator-token/creator-token-users.tsx
+++ b/packages/app/components/creator-token/creator-token-users.tsx
@@ -296,10 +296,10 @@ export const TopCreatorTokenListItem = ({
                 >
                   {item.owner_profile?.name}
                 </Text>
-                <View tw="h-1" />
+                <View tw="h-2" />
                 <Text
                   tw="text-xs text-gray-500 dark:text-gray-400"
-                  numberOfLines={1}
+                  numberOfLines={3}
                 >
                   {item.owner_profile?.bio}
                 </Text>
diff --git a/packages/app/components/creator-token/top-creator-token.tsx b/packages/app/components/creator-token/top-creator-token.tsx
index 74234456e..6355feabe 100644
--- a/packages/app/components/creator-token/top-creator-token.tsx
+++ b/packages/app/components/creator-token/top-creator-token.tsx
@@ -115,7 +115,7 @@ export const TopCreatorTokens = ({
         contentContainerStyle={{
           paddingHorizontal: 12,
         }}
-        overscan={12}
+        overscan={20}
         ListHeaderComponent={Header}
         containerTw="px-4"
         onEndReached={disableFetchMore ? () => {} : fetchMore}
diff --git a/packages/app/hooks/creator-token/use-creator-tokens.ts b/packages/app/hooks/creator-token/use-creator-tokens.ts
index 1a6cd8483..8d2f32372 100644
--- a/packages/app/hooks/creator-token/use-creator-tokens.ts
+++ b/packages/app/hooks/creator-token/use-creator-tokens.ts
@@ -94,12 +94,13 @@ export const useTopCreatorToken = (limit: number = 15) => {
     [limit]
   );
 
-  const { data, ...queryState } = useInfiniteListQuerySWR<TopCreatorToken>(
-    fetchUrl,
-    {
-      pageSize: limit,
-    }
-  );
+  const {
+    data,
+    fetchMore: fetchMoreData,
+    ...queryState
+  } = useInfiniteListQuerySWR<TopCreatorToken>(fetchUrl, {
+    pageSize: limit,
+  });
 
   const newData = useMemo(() => {
     let newData: TopCreatorToken["creator_tokens"] = [];
@@ -112,8 +113,15 @@ export const useTopCreatorToken = (limit: number = 15) => {
     }
     return newData;
   }, [data]);
+
+  const fetchMore = useCallback(() => {
+    if (newData.length >= 100) return;
+    fetchMoreData();
+  }, [fetchMoreData, newData.length]);
+
   return {
     ...queryState,
+    fetchMore,
     data: newData,
   };
 };