mud review fixes

ui/address/mud/AddressMudRecord.tsx

@@ -6,6 +6,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import dayjs from 'lib/date/dayjs';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
 import AddressMudBreadcrumbs from './AddressMudBreadcrumbs';
@@ -36,7 +37,7 @@ const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef
   }
 
   if (isError) {
-    return <Box>error message</Box>;
+    return <DataFetchAlert/>;
   }
 
   return (

ui/address/mud/AddressMudRecordsTable.tsx

@@ -47,7 +47,7 @@ const AddressMudRecordsTable = ({
 }: Props) => {
   const totalColsCut = data.schema.key_names.length + data.schema.value_names.length;
   const isMobile = useIsMobile(false);
-  const [ colsCutCount, setColsCutCount ] = React.useState<number>(isMobile ? 2 : 0);
+  const [ colsCutCount, setColsCutCount ] = React.useState<number>(isMobile ? MIN_CUT_COUNT : 0);
   const [ isOpened, setIsOpened ] = useBoolean(false);
   const [ hasCut, setHasCut ] = useBoolean(isMobile ? totalColsCut > MIN_CUT_COUNT : true);
 
@@ -70,11 +70,14 @@ const AddressMudRecordsTable = ({
 
     e.preventDefault();
 
-    router.push(
-      { pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: data.table.table_id, record_id: e.currentTarget.getAttribute('data-id') as string } },
-      undefined,
-      { shallow: true },
-    );
+    const recordId = e.currentTarget.getAttribute('data-id');
+    if (recordId) {
+      router.push(
+        { pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: data.table.table_id, record_id: recordId } },
+        undefined,
+        { shallow: true },
+      );
+    }
     scrollRef?.current?.scrollIntoView();
   }, [ router, scrollRef, hash, data.table.table_id ]);
 
@@ -96,7 +99,7 @@ const AddressMudRecordsTable = ({
   React.useEffect(() => {
     if (hasCut && !colsCutCount && containerRef.current) {
       const count = Math.floor((containerRef.current.getBoundingClientRect().width - CUT_COL_WIDTH) / COL_MIN_WIDTH);
-      if (totalColsCut > 2 && count - 1 < totalColsCut) {
+      if (totalColsCut > MIN_CUT_COUNT && count - 1 < totalColsCut) {
         setColsCutCount(count - 1);
       } else {
         setHasCut.off();

ui/address/mud/AddressMudTable.tsx

@@ -19,6 +19,9 @@ import AddressMudBreadcrumbs from './AddressMudBreadcrumbs';
 import AddressMudRecordsTable from './AddressMudRecordsTable';
 import { getNameTypeText, SORT_SEQUENCE } from './utils';
 
+const BREADCRUMBS_HEIGHT = 60;
+const FILTERS_HEIGHT = 44;
+
 type Props ={
   scrollRef?: React.RefObject<HTMLDivElement>;
   isQueryEnabled?: boolean;
@@ -65,10 +68,10 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
 
   const hasActiveFilters = Object.values(filters).some(Boolean);
 
-  const actionBatHeight = React.useMemo(() => {
-    const heightWithoutFilters = pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 60;
+  const actionBarHeight = React.useMemo(() => {
+    const heightWithoutFilters = pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : BREADCRUMBS_HEIGHT;
 
-    return hasActiveFilters ? heightWithoutFilters + 44 : heightWithoutFilters;
+    return hasActiveFilters ? heightWithoutFilters + FILTERS_HEIGHT : heightWithoutFilters;
   }, [ pagination.isVisible, hasActiveFilters ]);
 
   if (isLoading) {
@@ -118,7 +121,7 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
   const content = data?.items ? (
     <AddressMudRecordsTable
       data={ data }
-      top={ actionBatHeight }
+      top={ actionBarHeight }
       sorting={ sorting }
       toggleSorting={ toggleSorting }
       setFilters={ setFilters }

ui/address/mud/AddressMudTablesListItem.tsx

@@ -32,11 +32,15 @@ const AddressMudTablesListItem = ({ item, isLoading, scrollRef, hash }: Props) =
 
     e.preventDefault();
 
-    router.push(
-      { pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: e.currentTarget.getAttribute('data-id') as string } },
-      undefined,
-      { shallow: true },
-    );
+    const tableId = e.currentTarget.getAttribute('data-id');
+    if (tableId) {
+      router.push(
+        { pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: tableId } },
+        undefined,
+        { shallow: true },
+      );
+    }
+
     scrollRef?.current?.scrollIntoView();
   }, [ router, scrollRef, hash ]);
 

ui/address/mud/AddressMudTablesTableItem.tsx

@@ -30,11 +30,14 @@ const AddressMudTablesTableItem = ({ item, isLoading, scrollRef, hash }: Props)
 
     e.preventDefault();
 
-    router.push(
-      { pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: e.currentTarget.getAttribute('data-id') as string } },
-      undefined,
-      { shallow: true },
-    );
+    const tableId = e.currentTarget.getAttribute('data-id');
+    if (tableId) {
+      router.push(
+        { pathname: '/address/[hash]', query: { hash, tab: 'mud', table_id: tableId } },
+        undefined,
+        { shallow: true },
+      );
+    }
     scrollRef?.current?.scrollIntoView();
   }, [ router, scrollRef, hash ]);
 

ui/addresses/AddressesTableItem.tsx

@@ -49,8 +49,7 @@ const AddressesTableItem = ({
       </Td>
       <Td isNumeric>
         <Skeleton isLoaded={ !isLoading } display="inline-block" maxW="100%">
-          <Text lineHeight="24px" as="span">{ addressBalanceChunks[0] }</Text>
-          { addressBalanceChunks[1] && <Text lineHeight="24px" as="span">.</Text> }
+          <Text lineHeight="24px" as="span">{ addressBalanceChunks[0] + (addressBalanceChunks[1] ? '.' : '') }</Text>
           <Text lineHeight="24px" variant="secondary" as="span">{ addressBalanceChunks[1] }</Text>
         </Skeleton>
       </Td>

ui/mudWorlds/MudWorldsTableItem.tsx

@@ -20,8 +20,7 @@ const MudWorldsTableItem = ({ item, isLoading }: Props) => {
       </Td>
       <Td isNumeric>
         <Skeleton isLoaded={ !isLoading } display="inline-block" maxW="100%">
-          <Text lineHeight="24px" as="span">{ addressBalanceChunks[0] }</Text>
-          { addressBalanceChunks[1] && <Text lineHeight="24px" as="span">.</Text> }
+          <Text lineHeight="24px" as="span">{ addressBalanceChunks[0] + (addressBalanceChunks[1] ? '.' : '') }</Text>
           <Text lineHeight="24px" variant="secondary" as="span">{ addressBalanceChunks[1] }</Text>
         </Skeleton>
       </Td>

ui/pages/Address.tsx

@@ -106,10 +106,11 @@ const AddressPageContent = () => {
     addressEnsDomainsQuery.data?.items.find((domain) => domain.name === addressQuery.data?.ens_domain_name) :
     undefined;
 
-  const isLoading = addressQuery.isPlaceholderData || (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData);
+  const isLoading = addressQuery.isPlaceholderData;
   const isTabsLoading =
     isLoading ||
     addressTabsCountersQuery.isPlaceholderData ||
+    (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData) ||
     (config.features.mudFramework.isEnabled && mudTablesCountQuery.isPlaceholderData);
 
   const handleFetchedBytecodeMessage = React.useCallback(() => {

ui/shared/DataListDisplay.tsx

@@ -13,7 +13,7 @@ type FilterProps = {
 type Props = {
   isError: boolean;
   items?: Array<unknown>;
-  emptyText: string | React.ReactNode;
+  emptyText: React.ReactNode;
   actionBar?: React.ReactNode;
   showActionBarIfEmpty?: boolean;
   content: React.ReactNode;

ui/shared/filters/TableColumnFilter.tsx

@@ -9,19 +9,6 @@ import React from 'react';
 
 import TableColumnFilterWrapper from './TableColumnFilterWrapper';
 
-type Props = {
-  columnName: string;
-  title: string;
-  isActive?: boolean;
-  isFilled?: boolean;
-  onFilter: () => void;
-  onReset?: () => void;
-  onClose?: () => void;
-  isLoading?: boolean;
-  className?: string;
-  children: React.ReactNode;
-}
-
 type ContentProps = {
   title: string;
   isFilled?: boolean;
@@ -32,6 +19,13 @@ type ContentProps = {
   children: React.ReactNode;
 }
 
+type Props = ContentProps & {
+  columnName: string;
+  isActive?: boolean;
+  isLoading?: boolean;
+  className?: string;
+}
+
 const TableColumnFilterContent = ({ title, isFilled, hasReset, onFilter, onReset, onClose, children }: ContentProps) => {
   const onFilterClick = React.useCallback(() => {
     onClose && onClose();

ui/shared/sort/getNextSortValue.ts

@@ -3,10 +3,7 @@ export default function getNextSortValue<SortField extends string, Sort extends
 ) {
   return (prevValue: Sort | undefined) => {
     const sequence = sortSequence[field];
-    getNextValueFromSequence(sequence, prevValue);
-    const curIndex = sequence.findIndex((sort) => sort === prevValue);
-    const nextIndex = curIndex + 1 > sequence.length - 1 ? 0 : curIndex + 1;
-    return sequence[nextIndex];
+    return getNextValueFromSequence(sequence, prevValue);
   };
 }