fix: add height queries for token factory page list

liftedinit · Dec 24, 2024 · 91a57c6 · 91a57c6
1 parent 26e9730
commit 91a57c6
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 9 deletions.
diff --git a/components/groups/components/groupControls.tsx b/components/groups/components/groupControls.tsx
@@ -414,11 +414,7 @@ export default function GroupControls({
                       </td>
                       <td className="bg-secondary group-hover:bg-base-300 px-4 py-4 w-[25%] sm:table-cell md:hidden hidden xl:table-cell ">
                         {proposal.messages.length > 0
-                          ? proposal.messages.map((message, index) => (
-                              <div key={index}>
-                                {getHumanReadableType((message as any)['@type'])}
-                              </div>
-                            ))
+                          ? getHumanReadableType((proposal.messages[0] as any)['@type'])
                           : 'No messages'}
                       </td>
                       <td className="bg-secondary group-hover:bg-base-300 rounded-r-[12px] sm:table-cell xxs:hidden hidden 2xl:table-cell">

diff --git a/pages/factory/index.tsx b/pages/factory/index.tsx
@@ -9,7 +9,7 @@ import {
 
 import { useChain } from '@cosmos-kit/react';
 
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import { ExtendedMetadataSDKType, SEO } from '@/utils';
 import env from '@/config/env';
 import useIsMobile from '../../hooks/useIsMobile';
@@ -28,7 +28,51 @@ export default function Factory() {
     useTotalSupply();
 
   const isMobile = useIsMobile();
-  const pageSize = isMobile ? 5 : 8;
+  const [pageSize, setPageSize] = useState({
+    denomList: 8,
+    skeleton: 9,
+  });
+
+  const updatePageSizes = useCallback(() => {
+    const height = window.innerHeight;
+    const width = window.innerWidth;
+
+    // Small screens (mobile)
+    if (height < 768) {
+      setPageSize({
+        denomList: 4,
+        skeleton: 5,
+      });
+      return;
+    }
+
+    // Adjust based on height for larger screens
+    if (height < 800) {
+      setPageSize({
+        denomList: 6,
+        skeleton: 7,
+      });
+    } else if (height < 1000) {
+      setPageSize({
+        denomList: 8,
+        skeleton: 9,
+      });
+    } else {
+      // For very tall screens
+      setPageSize({
+        denomList: 10,
+        skeleton: 11,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    updatePageSizes();
+    window.addEventListener('resize', updatePageSizes);
+    return () => window.removeEventListener('resize', updatePageSizes);
+  }, [updatePageSizes]);
+
+  const denomListPageSize = pageSize.denomList;
 
   const isLoading =
     isDenomsLoading || isMetadatasLoading || isBalancesLoading || isTotalSupplyLoading;
@@ -107,7 +151,7 @@ export default function Factory() {
                       denoms={combinedData}
                       isLoading={isLoading}
                       refetchDenoms={refetchData}
-                      pageSize={pageSize}
+                      pageSize={denomListPageSize}
                       address={address ?? ''}
                       admin={address ?? ''}
                       searchTerm={searchTerm}
@@ -123,7 +167,7 @@ export default function Factory() {
                       denoms={combinedData}
                       isLoading={isLoading}
                       refetchDenoms={refetchData}
-                      pageSize={pageSize}
+                      pageSize={denomListPageSize}
                       address={address ?? ''}
                       admin={address ?? ''}
                       searchTerm={searchTerm}