fixes

ui/pages/UserOp.tsx

@@ -22,7 +22,7 @@ import UserOpCallData from 'ui/userOp/UserOpCallData';
 import UserOpDetails from 'ui/userOp/UserOpDetails';
 import UserOpRaw from 'ui/userOp/UserOpRaw';
 
-const BlockPageContent = () => {
+const UserOp = () => {
   const router = useRouter();
   const appProps = useAppContext();
   const hash = getQueryParamString(router.query.hash);
@@ -35,27 +35,30 @@ const BlockPageContent = () => {
     },
   });
 
+  const logRangeStart = Number(userOpQuery.data?.user_logs_start_index);
+  const logRangeEnd = logRangeStart + Number(userOpQuery.data?.user_logs_count);
+
   const filterTokenTransfersByLogIndex = React.useCallback((tt: TokenTransfer) => {
     if (!userOpQuery.data) {
       return true;
     } else {
-      if (inRange(Number(tt.log_index), userOpQuery.data.user_logs_start_index, userOpQuery.data.user_logs_start_index + userOpQuery.data.user_logs_count)) {
+      if (inRange(Number(tt.log_index), logRangeStart, logRangeEnd)) {
         return true;
       }
       return false;
     }
-  }, [ userOpQuery.data ]);
+  }, [ userOpQuery.data, logRangeStart, logRangeEnd ]);
 
   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)) {
+      if (inRange(log.index, logRangeStart, logRangeEnd)) {
         return true;
       }
       return false;
     }
-  }, [ userOpQuery.data ]);
+  }, [ userOpQuery.data, logRangeStart, logRangeEnd ]);
 
   const tabs: Array<RoutedTab> = React.useMemo(() => ([
     { id: 'index', title: 'Details', component: <UserOpDetails query={ userOpQuery }/> },
@@ -117,4 +120,4 @@ const BlockPageContent = () => {
   );
 };
 
-export default BlockPageContent;
+export default UserOp;

ui/userOp/UserOpDetails.tsx

@@ -17,7 +17,7 @@ import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import UserOpsAddress from 'ui/shared/userOps/UserOpsAddress';
 import UserOpSponsorType from 'ui/shared/userOps/UserOpSponsorType';
 import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
@@ -71,7 +71,7 @@ const UserOpDetails = ({ query }: Props) => {
         isLoading={ isPlaceholderData }
       >
         <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
-          <HashStringShortenDynamic hash={ data.hash }/>
+          <UserOpEntity hash={ data.hash } noIcon noLink/>
         </Skeleton>
       </DetailsInfoItem>
       <DetailsInfoItem
@@ -138,7 +138,7 @@ const UserOpDetails = ({ query }: Props) => {
         title="Transaction hash"
         hint="Hash of the transaction this User operation belongs to"
       >
-        <TxEntity hash={ data.transaction_hash } isLoading={ isPlaceholderData }/>
+        <TxEntity hash={ data.transaction_hash } isLoading={ isPlaceholderData } noCopy={ false }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Block"

ui/userOps/UserOpsContent.tsx

@@ -33,15 +33,15 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
         />
       </Hide>
       <Show below="lg" ssr={ false }>
-        { query.data.items.map(((item, index) => (
+        { query.data.items.map((item, index) => (
           <UserOpsListItem
             key={ item.hash + (query.isPlaceholderData ? String(index) : '') }
             item={ item }
             isLoading={ query.isPlaceholderData }
             showTx={ showTx }
             showSender={ showSender }
           />
-        ))) }
+        )) }
       </Show>
     </>
   ) : null;

ui/userOps/UserOpsTable.tsx

@@ -31,15 +31,17 @@ const UserOpsTable = ({ items, isLoading, top, showTx, showSender }: Props) => {
         </Tr>
       </Thead>
       <Tbody>
-        { items.map((item, index) => (
-          <UserOpsTableItem
-            key={ (isLoading ? String(index) : '') }
-            item={ item }
-            isLoading={ isLoading }
-            showSender={ showSender }
-            showTx={ showTx }
-          />
-        )) }
+        { items.map((item, index) => {
+          return (
+            <UserOpsTableItem
+              key={ item.hash + (isLoading ? String(index) : '') }
+              item={ item }
+              isLoading={ isLoading }
+              showSender={ showSender }
+              showTx={ showTx }
+            />
+          );
+        }) }
       </Tbody>
     </Table>
   );