logs and some fixes

ui/pages/UserOp.tsx

@@ -2,6 +2,7 @@ import { inRange } from 'lodash';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { Log } from 'types/api/log';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
@@ -11,10 +12,11 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { USER_OP } from 'stubs/userOps';
 import TextAd from 'ui/shared/ad/TextAd';
-import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
+import TxLogs from 'ui/tx/TxLogs';
 import TxTokenTransfer from 'ui/tx/TxTokenTransfer';
 import UserOpCallData from 'ui/userOp/UserOpCallData';
 import UserOpDetails from 'ui/userOp/UserOpDetails';
@@ -50,6 +52,17 @@ const BlockPageContent = () => {
     }
   }, [ userOpQuery.data ]);
 
+  const filterLogsByLogIndex = React.useCallback((log: Log) => {
+    if (!userOpQuery.data) {
+      return true;
+    } else {
+      if (inRange(log.index, userOpQuery.data.user_logs_start_index, userOpQuery.data.user_logs_start_index + userOpQuery.data.user_logs_count)) {
+        return true;
+      }
+      return false;
+    }
+  }, [ userOpQuery.data ]);
+
   const tabs: Array<RoutedTab> = React.useMemo(() => ([
     { id: 'index', title: 'Details', component: <UserOpDetails query={ userOpQuery }/> },
     {
@@ -58,9 +71,9 @@ const BlockPageContent = () => {
       component: <TxTokenTransfer txHash={ userOpQuery.data?.transaction_hash } tokenTransferFilter={ filterTokenTransfersByLogIndex }/>,
     },
     { id: 'call_data', title: 'Call data', component: <UserOpCallData rawCallData={ userOpQuery.data?.call_data }/> },
-    // { id: 'logs', title: 'Logs', component: <UserOpLogs txHash={ userOpQuery.data?.transaction_hash }/> }
+    { id: 'logs', title: 'Logs', component: <TxLogs txHash={ userOpQuery.data?.transaction_hash } logsFilter={ filterLogsByLogIndex }/> },
     // { id: 'raw', title: 'Raw', component: <UserOpRaw txHash={ userOpQuery.data?.transaction_hash }/> }
-  ].filter(Boolean)), [ userOpQuery, filterTokenTransfersByLogIndex ]);
+  ].filter(Boolean)), [ userOpQuery, filterTokenTransfersByLogIndex, filterLogsByLogIndex ]);
 
   if (!hash) {
     throw new Error('User operation not found', { cause: { status: 404 } });
@@ -83,7 +96,7 @@ const BlockPageContent = () => {
     };
   }, [ appProps.referrer ]);
 
-  const titleSecondRow = <HashStringShortenDynamic hash={ hash }/>;
+  const titleSecondRow = <UserOpEntity hash={ hash } noLink noCopy={ false } fontWeight={ 500 } fontFamily="heading" iconSize="lg"/>;
 
   return (
     <>

ui/tx/TxLogs.tsx

 import { Box, Text } from '@chakra-ui/react';
 import React from 'react';
 
+import type { Log } from 'types/api/log';
+
 import { SECOND } from 'lib/consts';
 import { LOG } from 'stubs/log';
 import { generateListStub } from 'stubs/utils';
@@ -13,8 +15,13 @@ import TxPendingAlert from 'ui/tx/TxPendingAlert';
 import TxSocketAlert from 'ui/tx/TxSocketAlert';
 import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 
-const TxLogs = () => {
-  const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
+type Props = {
+  txHash?: string;
+  logsFilter?: (log: Log) => boolean;
+}
+
+const TxLogs = ({ txHash, logsFilter }: Props) => {
+  const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND, txHash });
   const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
     resourceName: 'tx_logs',
     pathParams: { hash: txInfo.data?.hash },
@@ -32,7 +39,17 @@ const TxLogs = () => {
     return <DataFetchAlert/>;
   }
 
-  if (!data?.items.length) {
+  let items: Array<Log> = [];
+
+  if (data?.items) {
+    if (isPlaceholderData) {
+      items = data?.items;
+    } else {
+      items = logsFilter ? data.items.filter(logsFilter) : data.items;
+    }
+  }
+
+  if (!items.length) {
     return <Text as="span">There are no logs for this transaction.</Text>;
   }
 
@@ -43,7 +60,7 @@ const TxLogs = () => {
           <Pagination ml="auto" { ...pagination }/>
         </ActionBar>
       ) }
-      { data?.items.map((item, index) => <LogItem key={ index } { ...item } type="transaction" isLoading={ isPlaceholderData }/>) }
+      { items.map((item, index) => <LogItem key={ index } { ...item } type="transaction" isLoading={ isPlaceholderData }/>) }
     </Box>
   );
 };

ui/userOps/UserOpsListItem.tsx

@@ -27,7 +27,7 @@ const UserOpsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>User op hash</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <UserOpEntity hash={ item.hash } noCopy={ false } isLoading={ isLoading }/>
+        <UserOpEntity hash={ item.hash } isLoading={ isLoading } fontWeight="700" noIcon/>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
@@ -53,6 +53,7 @@ const UserOpsListItem = ({ item, isLoading }: Props) => {
         <TxEntity
           hash={ item.transaction_hash }
           isLoading={ isLoading }
+          noIcon
         />
       </ListItemMobileGrid.Value>
 
@@ -63,6 +64,7 @@ const UserOpsListItem = ({ item, isLoading }: Props) => {
           isLoading={ isLoading }
           fontSize="sm"
           lineHeight={ 5 }
+          noIcon
         />
       </ListItemMobileGrid.Value>
 

ui/userOps/UserOpsTableItem.tsx

@@ -23,7 +23,7 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
   return (
     <Tr>
       <Td verticalAlign="middle">
-        <UserOpEntity hash={ item.hash } noCopy={ false } isLoading={ isLoading }/>
+        <UserOpEntity hash={ item.hash } isLoading={ isLoading } noIcon fontWeight={ 700 }/>
       </Td>
       <Td verticalAlign="middle">
         <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block"><span>{ timeAgo }</span></Skeleton>
@@ -43,6 +43,7 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
           hash={ item.transaction_hash }
           isLoading={ isLoading }
           truncation="constant"
+          noIcon
         />
       </Td>
       <Td verticalAlign="middle">
@@ -51,6 +52,7 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
           isLoading={ isLoading }
           fontSize="sm"
           lineHeight={ 5 }
+          noIcon
         />
       </Td>
       <Td verticalAlign="middle" isNumeric>