withdrawals, logs and user ops tabs on address page

toolkit/components/RoutedTabs/RoutedTabs.tsx

@@ -55,7 +55,7 @@ const RoutedTabs = (props: Props) => {
       { ...rest }
       tabs={ tabs }
       onValueChange={ handleValueChange }
-      defaultValue={ activeTab ? getTabValue(activeTab) : undefined }
+      defaultValue={ activeTab ? getTabValue(activeTab) : getTabValue(tabs[ 0 ]) }
     />
   );
 };

ui/address/AddressLogs.tsx

@@ -70,11 +70,12 @@ const AddressLogs = ({ scrollRef, shouldRender = true, isQueryEnabled = true }:
   return (
     <DataListDisplay
       isError={ isError }
-      items={ data?.items }
+      itemsNum={ data?.items?.length }
       emptyText="There are no logs for this address."
-      content={ content }
       actionBar={ actionBar }
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };
 

ui/address/AddressTokenTransfers.tsx

-import { Flex, Hide, Show, Text } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -201,7 +201,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shou
 
   const content = data?.items ? (
     <>
-      <Hide below="lg" ssr={ false }>
+      <Box hideBelow="lg">
         <TokenTransferTable
           data={ data?.items }
           baseAddress={ currentAddress }
@@ -213,8 +213,8 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shou
           socketInfoNum={ newItemsCount }
           isLoading={ isPlaceholderData }
         />
-      </Hide>
-      <Show below="lg" ssr={ false }>
+      </Box>
+      <Box hideFrom="lg">
         { pagination.page === 1 && !tokenFilter && (
           <SocketNewItemsNotice.Mobile
             url={ window.location.href }
@@ -231,7 +231,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shou
           enableTimeIncrement
           isLoading={ isPlaceholderData }
         />
-      </Show>
+      </Box>
     </>
   ) : null;
 
@@ -280,15 +280,16 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shou
   return (
     <DataListDisplay
       isError={ isError }
-      items={ data?.items }
+      itemsNum={ data?.items?.length }
       emptyText="There are no token transfers."
       filterProps={{
         emptyFilteredText: `Couldn${ apos }t find any token transfer that matches your query.`,
         hasActiveFilters: Boolean(numActiveFilters),
       }}
-      content={ content }
       actionBar={ actionBar }
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };
 

ui/address/AddressWithdrawals.tsx

-import { Show, Hide } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -43,7 +43,7 @@ const AddressWithdrawals = ({ scrollRef, shouldRender = true, isQueryEnabled = t
 
   const content = data?.items ? (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         { data.items.map((item, index) => (
           <BeaconChainWithdrawalsListItem
             key={ item.index + Number(isPlaceholderData ? index : '') }
@@ -52,15 +52,15 @@ const AddressWithdrawals = ({ scrollRef, shouldRender = true, isQueryEnabled = t
             isLoading={ isPlaceholderData }
           />
         )) }
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <BeaconChainWithdrawalsTable
           items={ data.items }
           view="address"
           top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
           isLoading={ isPlaceholderData }
         />
-      </Hide>
+      </Box>
     </>
   ) : null ;
 
@@ -73,11 +73,12 @@ const AddressWithdrawals = ({ scrollRef, shouldRender = true, isQueryEnabled = t
   return (
     <DataListDisplay
       isError={ isError }
-      items={ data?.items }
+      itemsNum={ data?.items?.length }
       emptyText="There are no withdrawals for this address."
-      content={ content }
       actionBar={ actionBar }
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };
 

ui/pages/Address.tsx

@@ -172,28 +172,28 @@ const AddressPageContent = () => {
       //     component: <AddressAccountHistory scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
       //   } :
       //   undefined,
-      // config.features.userOps.isEnabled && Boolean(userOpsAccountQuery.data?.total_ops) ?
-      //   {
-      //     id: 'user_ops',
-      //     title: 'User operations',
-      //     count: userOpsAccountQuery.data?.total_ops,
-      //     component: <AddressUserOps shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
-      //   } :
-      //   undefined,
-      // config.features.beaconChain.isEnabled && addressTabsCountersQuery.data?.withdrawals_count ?
-      //   {
-      //     id: 'withdrawals',
-      //     title: 'Withdrawals',
-      //     count: addressTabsCountersQuery.data?.withdrawals_count,
-      //     component: <AddressWithdrawals scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
-      //   } :
-      //   undefined,
-      // {
-      //   id: 'token_transfers',
-      //   title: 'Token transfers',
-      //   count: addressTabsCountersQuery.data?.token_transfers_count,
-      //   component: <AddressTokenTransfers scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
-      // },
+      config.features.userOps.isEnabled && Boolean(userOpsAccountQuery.data?.total_ops) ?
+        {
+          id: 'user_ops',
+          title: 'User operations',
+          count: userOpsAccountQuery.data?.total_ops,
+          component: <AddressUserOps shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+        } :
+        undefined,
+      config.features.beaconChain.isEnabled && addressTabsCountersQuery.data?.withdrawals_count ?
+        {
+          id: 'withdrawals',
+          title: 'Withdrawals',
+          count: addressTabsCountersQuery.data?.withdrawals_count,
+          component: <AddressWithdrawals scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+        } :
+        undefined,
+      {
+        id: 'token_transfers',
+        title: 'Token transfers',
+        count: addressTabsCountersQuery.data?.token_transfers_count,
+        component: <AddressTokenTransfers scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+      },
       // {
       //   id: 'tokens',
       //   title: 'Tokens',
@@ -226,14 +226,14 @@ const AddressPageContent = () => {
           component: <AddressBlocksValidated scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
         } :
         undefined,
-      // addressTabsCountersQuery.data?.logs_count ?
-      //   {
-      //     id: 'logs',
-      //     title: 'Logs',
-      //     count: addressTabsCountersQuery.data?.logs_count,
-      //     component: <AddressLogs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
-      //   } :
-      //   undefined,
+      addressTabsCountersQuery.data?.logs_count ?
+        {
+          id: 'logs',
+          title: 'Logs',
+          count: addressTabsCountersQuery.data?.logs_count,
+          component: <AddressLogs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
+        } :
+        undefined,
 
       // addressQuery.data?.is_contract ? {
       //   id: 'contract',

ui/shared/HashStringShortenDynamic.tsx

@@ -28,6 +28,7 @@ interface Props {
   as?: React.ElementType;
 }
 
+// TODO @tom2drum fix truncation when loading
 const HashStringShortenDynamic = ({ hash, fontWeight = '400', isTooltipDisabled, tailLength = TAIL_LENGTH, as = 'span' }: Props) => {
   const elementRef = useRef<HTMLSpanElement>(null);
   const [ displayedString, setDisplayedString ] = React.useState(hash);

ui/shared/SocketAlert.tsx

-import { Text, Alert, Link, chakra } from '@chakra-ui/react';
+import { Text, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import { Alert } from 'toolkit/chakra/alert';
+import { Link } from 'toolkit/chakra/link';
+
 interface Props {
   className?: string;
 }

ui/shared/logs/LogDecodedInputDataHeader.tsx

@@ -45,7 +45,7 @@ const LogDecodedInputDataHeader = ({ methodId, methodCall, isLoading, rightSlot
         { rightSlot }
       </Flex>
       <Item label="Call" isLoading={ isLoading }>
-        <Skeleton loading={ isLoading } whiteSpace="pre-wrap" w="100%">{ methodCall }</Skeleton>
+        <Skeleton loading={ isLoading } whiteSpace="pre-wrap" flexGrow={ 1 }>{ methodCall }</Skeleton>
       </Item>
     </VStack>
   );

ui/shared/logs/LogIndex.tsx

@@ -14,9 +14,10 @@ const LogIndex = ({ children, isLoading, ...props }: Props) => {
     <Tooltip content="Log index">
       <Skeleton loading={ isLoading } asChild>
         <Center
-          color={{ _light: 'blue.600', _dark: 'gray.50' }}
-          bgColor={{ _light: 'blue.50', _dark: 'gray.600' }}
+          color={ isLoading ? 'transparent' : { _light: 'blue.600', _dark: 'gray.50' } }
+          bgColor={ isLoading ? undefined : { _light: 'blue.50', _dark: 'gray.600' } }
           borderRadius="base"
+          px={ 2 }
           { ...props }
         >
           { children }

ui/shared/logs/LogItem.tsx

@@ -63,12 +63,14 @@ const LogItem = ({ address, index, topics, data, decoded, type, transaction_hash
             hash={ txHash }
             isLoading={ isLoading }
             mr={{ base: 9, lg: 4 }}
+            w="100%"
           />
         ) : (
           <AddressEntity
             address={ address }
             isLoading={ isLoading }
             mr={{ base: 9, lg: 4 }}
+            w="100%"
           />
         ) }
         { /* api doesn't have find topic feature yet */ }

ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx

@@ -51,8 +51,7 @@ const BeaconChainWithdrawalsListItem = ({ item, isLoading, view }: Props) => {
             <BlockEntity
               number={ item.block_number }
               isLoading={ isLoading }
-              fontSize="sm"
-              lineHeight={ 5 }
+              textStyle="sm"
             />
           </ListItemMobileGrid.Value>
         </>

ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx

@@ -36,8 +36,7 @@ const BeaconChainWithdrawalsTableItem = ({ item, view, isLoading }: Props) => {
           <BlockEntity
             number={ item.block_number }
             isLoading={ isLoading }
-            fontSize="sm"
-            lineHeight={ 5 }
+            textStyle="sm"
             noIcon
           />
         </TableCell>