better types

ui/address/AddressBlocksValidated.tsx

@@ -109,8 +109,7 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
       isError={ query.isError }
       isLoading={ query.isLoading }
       items={ query.data?.items }
-      isLongSkeleton
-      skeletonDesktopColumns={ [ '17%', '17%', '16%', '25%', '25%' ] }
+      skeletonProps={{ isLongSkeleton: true, skeletonDesktopColumns: [ '17%', '17%', '16%', '25%', '25%' ] }}
       emptyText="There are no validated blocks for this address."
       content={ content }
       actionBar={ actionBar }

ui/address/AddressInternalTxs.tsx

@@ -68,11 +68,9 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
       isError={ isError }
       isLoading={ isLoading }
       items={ data?.items }
-      isLongSkeleton
-      skeletonDesktopColumns={ [ '15%', '15%', '10%', '20%', '20%', '20%' ] }
+      skeletonProps={{ isLongSkeleton: true, skeletonDesktopColumns: [ '15%', '15%', '10%', '20%', '20%', '20%' ] }}
+      filterProps={{ emptyFilteredText: `Couldn${ apos }t find any transaction that matches your query.`, hasActiveFilters: Boolean(filterValue) }}
       emptyText="There are no internal transactions for this address."
-      emptyFilteredText={ `Couldn${ apos }t find any transaction that matches your query.` }
-      hasActiveFilters={ Boolean(filterValue) }
       content={ content }
       actionBar={ actionBar }
     />

ui/address/AddressLogs.tsx

@@ -37,7 +37,7 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
       emptyText="There are no logs for this address."
       content={ content }
       actionBar={ actionBar }
-      customSkeleton={ skeleton }
+      skeletonProps={{ customSkeleton: skeleton }}
     />
   );
 };

ui/address/AddressTokenTransfers.tsx

@@ -247,11 +247,15 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
       isError={ isError }
       isLoading={ isLoading }
       items={ data?.items }
-      isLongSkeleton
-      skeletonDesktopColumns={ [ '44px', '185px', '160px', '25%', '25%', '25%', '25%' ] }
+      skeletonProps={{
+        isLongSkeleton: true,
+        skeletonDesktopColumns: [ '44px', '185px', '160px', '25%', '25%', '25%', '25%' ],
+      }}
       emptyText="There are no token transfers."
-      emptyFilteredText={ `Couldn${ apos }t find any token transfer that matches your query.` }
-      hasActiveFilters={ Boolean(numActiveFilters) }
+      filterProps={{
+        emptyFilteredText: `Couldn${ apos }t find any token transfer that matches your query.`,
+        hasActiveFilters: Boolean(numActiveFilters),
+      }}
       content={ content }
       actionBar={ actionBar }
     />

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -63,7 +63,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
       isError={ query.isError }
       isLoading={ query.isLoading }
       items={ query.data?.items }
-      skeletonDesktopColumns={ [ '25%', '25%', '25%', '25%', '120px' ] }
+      skeletonProps={{ skeletonDesktopColumns: [ '25%', '25%', '25%', '25%', '120px' ] }}
       emptyText="There is no coin balance history for this address."
       content={ content }
       actionBar={ actionBar }

ui/address/tokens/TokensWithIds.tsx

@@ -64,7 +64,7 @@ const TokensWithIds = ({ tokensQuery }: Props) => {
       emptyText="There are no tokens of selected type."
       content={ content }
       actionBar={ actionBar }
-      customSkeleton={ skeleton }
+      skeletonProps={{ customSkeleton: skeleton }}
     />
   );
 };

ui/address/tokens/TokensWithoutIds.tsx

@@ -42,8 +42,10 @@ const TokensWithoutIds = ({ tokensQuery }: Props) => {
       isError={ isError }
       isLoading={ isLoading }
       items={ data?.items }
-      isLongSkeleton
-      skeletonDesktopColumns={ [ '30%', '30%', '10%', '20%', '10%' ] }
+      skeletonProps={{
+        isLongSkeleton: true,
+        skeletonDesktopColumns: [ '30%', '30%', '10%', '20%', '10%' ],
+      }}
       emptyText="There are no tokens of selected type."
       content={ content }
       actionBar={ actionBar }

ui/blocks/BlocksContent.tsx

@@ -97,7 +97,7 @@ const BlocksContent = ({ type, query }: Props) => {
       isError={ query.isError }
       isLoading={ query.isLoading }
       items={ query.data?.items }
-      skeletonDesktopColumns={ [ '125px', '120px', '21%', '64px', '35%', '22%', '22%' ] }
+      skeletonProps={{ skeletonDesktopColumns: [ '125px', '120px', '21%', '64px', '35%', '22%', '22%' ] }}
       emptyText="There are no blocks."
       content={ content }
       actionBar={ actionBar }

ui/pages/Accounts.tsx

@@ -56,7 +56,7 @@ const Accounts = () => {
         isError={ isError }
         isLoading={ isLoading }
         items={ data?.items }
-        skeletonDesktopColumns={ [ '64px', '30%', '20%', '20%', '15%', '15%' ] }
+        skeletonProps={{ skeletonDesktopColumns: [ '64px', '30%', '20%', '20%', '15%', '15%' ] }}
         emptyText="There are no accounts."
         content={ content }
         actionBar={ actionBar }

ui/pages/VerifiedContracts.tsx

@@ -120,10 +120,12 @@ const VerifiedContracts = () => {
         isError={ isError }
         isLoading={ isLoading }
         items={ data?.items }
-        skeletonDesktopColumns={ [ '50%', '130px', '130px', '50%', '80px', '110px' ] }
+        skeletonProps={{ skeletonDesktopColumns: [ '50%', '130px', '130px', '50%', '80px', '110px' ] }}
         emptyText="There are no verified contracts."
-        emptyFilteredText={ `Couldn${ apos }t find any contract that matches your query.` }
-        hasActiveFilters={ Boolean(searchTerm || type) }
+        filterProps={{
+          emptyFilteredText: `Couldn${ apos }t find any contract that matches your query.`,
+          hasActiveFilters: Boolean(searchTerm || type),
+        }}
         content={ content }
         actionBar={ actionBar }
       />

ui/shared/DataListDisplay.tsx

@@ -7,20 +7,29 @@ import DataFetchAlert from './DataFetchAlert';
 import SkeletonList from './skeletons/SkeletonList';
 import SkeletonTable from './skeletons/SkeletonTable';
 
+type SkeletonProps =
+  { customSkeleton: React.ReactNode } |
+  {
+    skeletonDesktopColumns: Array<string>;
+    isLongSkeleton?: boolean;
+  }
+
+type FilterProps = {
+  hasActiveFilters: boolean;
+  emptyFilteredText: string;
+};
+
 type Props = {
   isError: boolean;
   isLoading: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   items?: Array<any>;
   emptyText: string;
-  skeletonDesktopColumns?: Array<string>;
-  isLongSkeleton?: boolean;
   actionBar?: React.ReactNode;
   content: React.ReactNode;
-  customSkeleton?: React.ReactNode;
   className?: string;
-  hasActiveFilters?: boolean;
-  emptyFilteredText?: string;
+  skeletonProps: SkeletonProps;
+  filterProps?: FilterProps;
 }
 
 const DataListDisplay = (props: Props) => {
@@ -33,13 +42,14 @@ const DataListDisplay = (props: Props) => {
     return (
       <>
         { props.actionBar }
-        { props.customSkeleton || (
+        { 'customSkeleton' in props.skeletonProps && props.skeletonProps.customSkeleton }
+        { 'skeletonDesktopColumns' in props.skeletonProps && (
           <>
             <SkeletonList display={{ base: 'block', lg: 'none' }}/>
             <SkeletonTable
               display={{ base: 'none', lg: 'block' }}
-              columns={ props.skeletonDesktopColumns || [] }
-              isLong={ props.isLongSkeleton }
+              columns={ props.skeletonProps.skeletonDesktopColumns || [] }
+              isLong={ props.skeletonProps.isLongSkeleton }
             />
           </>
         ) }
@@ -47,11 +57,11 @@ const DataListDisplay = (props: Props) => {
     );
   }
 
-  if (props.hasActiveFilters && !props.items?.length) {
+  if (props.filterProps?.hasActiveFilters && !props.items?.length) {
     return (
       <>
         { props.actionBar }
-        <EmptySearchResult text={ props.emptyFilteredText }/>
+        <EmptySearchResult text={ props.filterProps.emptyFilteredText }/>
       </>
     );
   }

ui/token/TokenHolders/TokenHolders.tsx

@@ -48,7 +48,7 @@ const TokenHoldersContent = ({ holdersQuery, tokenQuery }: Props) => {
       isError={ holdersQuery.isError || tokenQuery.isError }
       isLoading={ holdersQuery.isLoading || tokenQuery.isLoading }
       items={ holdersQuery.data?.items }
-      skeletonDesktopColumns={ [ '100%', '300px', '175px' ] }
+      skeletonProps={{ skeletonDesktopColumns: [ '100%', '300px', '175px' ] }}
       emptyText="There are no holders for this token."
       content={ content }
       actionBar={ actionBar }

ui/token/TokenInventory.tsx

@@ -64,7 +64,7 @@ const TokenInventory = ({ inventoryQuery }: Props) => {
       emptyText="There are no tokens."
       content={ content }
       actionBar={ actionBar }
-      customSkeleton={ skeleton }
+      skeletonProps={{ customSkeleton: skeleton }}
     />
   );
 };

ui/token/TokenTransfer/TokenTransfer.tsx

@@ -100,8 +100,10 @@ const TokenTransfer = ({ transfersQuery, tokenId }: Props) => {
       isError={ isError }
       isLoading={ isLoading }
       items={ data?.items }
-      isLongSkeleton
-      skeletonDesktopColumns={ [ '45%', '15%', '36px', '15%', '25%' ] }
+      skeletonProps={{
+        isLongSkeleton: true,
+        skeletonDesktopColumns: [ '45%', '15%', '36px', '15%', '25%' ],
+      }}
       emptyText="There are no token transfers."
       content={ content }
       actionBar={ actionBar }

ui/tokens/Tokens.tsx

@@ -94,10 +94,12 @@ const Tokens = () => {
       isError={ isError }
       isLoading={ isLoading }
       items={ data?.items }
-      skeletonDesktopColumns={ [ '25px', '33%', '33%', '33%', '110px' ] }
+      skeletonProps={{ skeletonDesktopColumns: [ '25px', '33%', '33%', '33%', '110px' ] }}
       emptyText="There are no tokens."
-      emptyFilteredText={ `Couldn${ apos }t find token that matches your filter query.` }
-      hasActiveFilters={ Boolean(debouncedFilter || type) }
+      filterProps={{
+        emptyFilteredText: `Couldn${ apos }t find token that matches your filter query.`,
+        hasActiveFilters: Boolean(debouncedFilter || type),
+      }}
       content={ content }
       actionBar={ actionBar }
     />

ui/tx/TxInternals.tsx

@@ -120,10 +120,12 @@ const TxInternals = () => {
       isError={ isError || txInfo.isError }
       isLoading={ isLoading || txInfo.isLoading }
       items={ data?.items }
-      skeletonDesktopColumns={ [ '28%', '20%', '24px', '20%', '16%', '16%' ] }
+      skeletonProps={{ skeletonDesktopColumns: [ '28%', '20%', '24px', '20%', '16%', '16%' ] }}
       emptyText="There are no internal transactions for this transaction."
-      // emptyFilteredText={ `Couldn${ apos }t find any transaction that matches your query.` }
-      // hasActiveFilters={ Boolean(filters.length || searchTerm) }
+      // filterProps={{
+      // emptyFilteredText: `Couldn${ apos }t find any transaction that matches your query.`.
+      // hasActiveFilters: Boolean(filters.length || searchTerm),
+      // }}
       content={ content }
       actionBar={ actionBar }
     />

ui/tx/TxTokenTransfer.tsx

@@ -84,11 +84,15 @@ const TxTokenTransfer = () => {
       isError={ txsInfo.isError || tokenTransferQuery.isError }
       isLoading={ txsInfo.isLoading || tokenTransferQuery.isLoading }
       items={ tokenTransferQuery.data?.items }
-      isLongSkeleton
-      skeletonDesktopColumns={ [ '185px', '25%', '25%', '25%', '25%' ] }
+      skeletonProps={{
+        isLongSkeleton: true,
+        skeletonDesktopColumns: [ '185px', '25%', '25%', '25%', '25%' ],
+      }}
       emptyText="There are no token transfers."
-      emptyFilteredText={ `Couldn${ apos }t find any token transfer that matches your query.` }
-      hasActiveFilters={ Boolean(numActiveFilters) }
+      filterProps={{
+        emptyFilteredText: `Couldn${ apos }t find any token transfer that matches your query.`,
+        hasActiveFilters: Boolean(numActiveFilters),
+      }}
       content={ content }
       actionBar={ actionBar }
     />

ui/txs/TxsContent.tsx

@@ -107,11 +107,12 @@ const TxsContent = ({
       isError={ isError }
       isLoading={ isLoading }
       items={ data?.items }
-      isLongSkeleton={ hasLongSkeleton }
-      skeletonDesktopColumns={ showBlockInfo ?
+      skeletonProps={{
+        isLongSkeleton: hasLongSkeleton,
+        skeletonDesktopColumns: showBlockInfo ?
           [ '32px', '22%', '160px', '20%', '18%', '292px', '20%', '20%' ] :
-        [ '32px', '22%', '160px', '20%', '292px', '20%', '20%' ]
-      }
+          [ '32px', '22%', '160px', '20%', '292px', '20%', '20%' ],
+      }}
       emptyText="There are no transactions."
       content={ content }
       actionBar={ actionBar }