icon

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,
 };