icon

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"/>
+</svg>

lib/hooks/useNavItems.tsx

@@ -49,8 +49,7 @@ export default function useNavItems(): ReturnType {
     const userOps: NavItem | null = config.features.userOps.isEnabled ? {
       text: 'User operations',
       nextRoute: { pathname: '/ops' as const },
-      // change!!!
-      icon: 'top-accounts',
+      icon: 'user_op',
       isActive: pathname === '/ops' || pathname === '/op/[hash]',
     } : null;
 

public/icons/name.d.ts

@@ -123,6 +123,7 @@
 	| "txn_batches"
 	| "unfinalized"
 	| "uniswap"
+	| "user_op"
 	| "verified_token"
 	| "verified"
 	| "verify-contract"

ui/shared/entities/userOp/UserOpEntity.pw.tsx

@@ -6,26 +6,26 @@ import TestApp from 'playwright/TestApp';
 import UserOpEntity from './UserOpEntity';
 
 const hash = '0x376db52955d5bce114d0ccea2dcf22289b4eae1b86bcae5a59bb5fdbfef48899';
-// const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ];
 
 test.use({ viewport: { width: 180, height: 30 } });
 
-// test.describe('icon size', () => {
-//   iconSizes.forEach((size) => {
-//     test(size, async({ mount }) => {
-//       const component = await mount(
-//         <TestApp>
-//           <TxEntity
-//             hash={ hash }
-//             iconSize={ size }
-//           />
-//         </TestApp>,
-//       );
+test.describe('icon size', () => {
+  iconSizes.forEach((size) => {
+    test(size, async({ mount }) => {
+      const component = await mount(
+        <TestApp>
+          <UserOpEntity
+            hash={ hash }
+            iconSize={ size }
+          />
+        </TestApp>,
+      );
 
-//       await expect(component).toHaveScreenshot();
-//     });
-//   });
-// });
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});
 
 test('loading', async({ mount }) => {
   const component = await mount(

ui/shared/entities/userOp/UserOpEntity.tsx

@@ -21,18 +21,19 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-// type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
-//   name?: EntityBase.IconBaseProps['name'];
-// };
-
-// const Icon = (props: IconProps) => {
-//   return (
-//     <EntityBase.Icon
-//       { ...props }
-//       name={ props.name ?? 'transactions_slim' }
-//     />
-//   );
-// };
+type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & {
+  name?: EntityBase.IconBaseProps['name'];
+};
+
+const Icon = (props: IconProps) => {
+  return (
+    <EntityBase.Icon
+      { ...props }
+      // change to slim!!
+      name={ props.name ?? 'user_op' }
+    />
+  );
+};
 
 type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'hash'>;
 
@@ -70,7 +71,7 @@ const UserOpEntity = (props: EntityProps) => {
 
   return (
     <Container className={ props.className }>
-      { /* <Icon { ...partsProps }/> */ }
+      <Icon { ...partsProps }/>
       <Link { ...linkProps }>
         <Content { ...partsProps }/>
       </Link>
@@ -84,7 +85,7 @@ export default React.memo(chakra(UserOpEntity));
 export {
   Container,
   Link,
-  // Icon,
+  Icon,
   Content,
   Copy,
 };