fixes

icons/user_op.svg

 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
   <path fill="currentColor" d="M22.576 11.994a1.212 1.212 0 0 0 0-2.424H9.14L10.703 8a1.212 1.212 0 0 0-1.709-1.709L5.358 9.928a1.212 1.212 0 0 0-.267 1.32 1.212 1.212 0 0 0 1.121.746h16.364Z"/>
-  <path fill="#000" fill-opacity=".2" d="M22.576 11.994a1.212 1.212 0 0 0 0-2.424H9.14L10.703 8a1.212 1.212 0 0 0-1.709-1.709L5.358 9.928a1.212 1.212 0 0 0-.267 1.32 1.212 1.212 0 0 0 1.121.746h16.364Z"/>
-  <path fill="currentColor" fill-rule="evenodd" d="M15.859 18.661c.091-.363.14-.754.14-1.161 0-.445-.059-.871-.167-1.263h7.955a1.213 1.213 0 0 1 1.121.745 1.212 1.212 0 0 1-.267 1.321l-3.636 3.637a1.214 1.214 0 0 1-2.049-.347 1.212 1.212 0 0 1 .34-1.362l1.564-1.57h-5.001Z" clip-rule="evenodd"/>
-  <path fill="#000" fill-opacity=".2" fill-rule="evenodd" d="M15.859 18.661c.091-.363.14-.754.14-1.161 0-.445-.059-.871-.167-1.263h7.955a1.213 1.213 0 0 1 1.121.745 1.212 1.212 0 0 1-.267 1.321l-3.636 3.637a1.214 1.214 0 0 1-2.049-.347 1.212 1.212 0 0 1 .34-1.362l1.564-1.57h-5.001Z" clip-rule="evenodd"/>
-  <path fill="currentColor" fill-rule="evenodd" d="M12.226 20.523a3.636 3.636 0 0 0 1.275-1.83 3.615 3.615 0 0 0-.035-2.225 3.638 3.638 0 0 0-1.334-1.787 3.675 3.675 0 0 0-4.264 0 3.638 3.638 0 0 0-1.333 1.787 3.615 3.615 0 0 0-.036 2.226 3.636 3.636 0 0 0 1.275 1.829 5.482 5.482 0 0 0-2.714 2.606.588.588 0 0 0 .038.583.593.593 0 0 0 .51.288h1.413C7.2 22.76 8.465 21.8 10 21.8c1.535 0 2.8.96 2.979 2.2h1.412a.599.599 0 0 0 .511-.288.588.588 0 0 0 .038-.583 5.482 5.482 0 0 0-2.714-2.606ZM11.7 17.5a1.7 1.7 0 1 1-3.4 0 1.7 1.7 0 0 1 3.4 0Z" clip-rule="evenodd"/>
-  <path fill="#000" fill-opacity=".2" fill-rule="evenodd" d="M12.226 20.523a3.636 3.636 0 0 0 1.275-1.83 3.615 3.615 0 0 0-.035-2.225 3.638 3.638 0 0 0-1.334-1.787 3.675 3.675 0 0 0-4.264 0 3.638 3.638 0 0 0-1.333 1.787 3.615 3.615 0 0 0-.036 2.226 3.636 3.636 0 0 0 1.275 1.829 5.482 5.482 0 0 0-2.714 2.606.588.588 0 0 0 .038.583.593.593 0 0 0 .51.288h1.413C7.2 22.76 8.465 21.8 10 21.8c1.535 0 2.8.96 2.979 2.2h1.412a.599.599 0 0 0 .511-.288.588.588 0 0 0 .038-.583 5.482 5.482 0 0 0-2.714-2.606ZM11.7 17.5a1.7 1.7 0 1 1-3.4 0 1.7 1.7 0 0 1 3.4 0Z" clip-rule="evenodd"/>
+  <path fill="currentColor" fill-rule="evenodd" d="M15.859 18.661c.091-.363.14-.754.14-1.161 0-.445-.059-.871-.167-1.263h7.955a1.213 1.213 0 0 1 1.121.745 1.212 1.212 0 0 1-.267 1.321l-3.636 3.637a1.214 1.214 0 0 1-2.049-.347 1.212 1.212 0 0 1 .34-1.362l1.564-1.57h-5.001ZM12.226 20.523a3.636 3.636 0 0 0 1.275-1.83 3.615 3.615 0 0 0-.035-2.225 3.638 3.638 0 0 0-1.334-1.787 3.675 3.675 0 0 0-4.264 0 3.638 3.638 0 0 0-1.333 1.787 3.615 3.615 0 0 0-.036 2.226 3.636 3.636 0 0 0 1.275 1.829 5.482 5.482 0 0 0-2.714 2.606.588.588 0 0 0 .038.583.593.593 0 0 0 .51.288h1.413C7.2 22.76 8.465 21.8 10 21.8c1.535 0 2.8.96 2.979 2.2h1.412a.599.599 0 0 0 .511-.288.588.588 0 0 0 .038-.583 5.482 5.482 0 0 0-2.714-2.606ZM11.7 17.5a1.7 1.7 0 1 1-3.4 0 1.7 1.7 0 0 1 3.4 0Z" clip-rule="evenodd"/>
 </svg>

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';
@@ -67,7 +67,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
@@ -134,7 +134,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,7 +33,7 @@ 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 }
@@ -41,7 +41,7 @@ const UserOpsContent = ({ query, showTx = true, showSender = true }: Props) => {
             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) => (
+        { items.map((item, index) => {
+          return (
             <UserOpsTableItem
-            key={ (isLoading ? String(index) : '') }
+              key={ item.hash + (isLoading ? String(index) : '') }
               item={ item }
               isLoading={ isLoading }
               showSender={ showSender }
               showTx={ showTx }
             />
-        )) }
+          );
+        }) }
       </Tbody>
     </Table>
   );