{ secondRow }
diff --git a/ui/searchResults/SearchResultTableItem.tsx b/ui/searchResults/SearchResultTableItem.tsx
index d2386943e3..6e3ea5140c 100644
--- a/ui/searchResults/SearchResultTableItem.tsx
+++ b/ui/searchResults/SearchResultTableItem.tsx
@@ -15,6 +15,7 @@ import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
+import * as UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import IconSvg from 'ui/shared/IconSvg';
import LinkExternal from 'ui/shared/LinkExternal';
@@ -284,6 +285,33 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
);
}
+ case 'user_operation': {
+ return (
+ <>
+ |
+
+
+
+
+
+
+ |
+
+ { dayjs(data.timestamp).format('llll') }
+ |
+
+ );
+ }
}
})();
diff --git a/ui/shared/DetailsTimestamp.tsx b/ui/shared/DetailsTimestamp.tsx
new file mode 100644
index 0000000000..7219c115d6
--- /dev/null
+++ b/ui/shared/DetailsTimestamp.tsx
@@ -0,0 +1,29 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import dayjs from 'lib/date/dayjs';
+import IconSvg from 'ui/shared/IconSvg';
+import TextSeparator from 'ui/shared/TextSeparator';
+
+type Props = {
+ // should be string, will be fixed on the back-end
+ timestamp: string | number;
+ isLoading?: boolean;
+}
+
+const DetailsTimestamp = ({ timestamp, isLoading }: Props) => {
+ return (
+ <>
+
+
+ { dayjs(timestamp).fromNow() }
+
+
+
+ { dayjs(timestamp).format('llll') }
+
+
+ );
+};
+
+export default DetailsTimestamp;
diff --git a/ui/shared/entities/userOp/UserOpEntity.pw.tsx b/ui/shared/entities/userOp/UserOpEntity.pw.tsx
new file mode 100644
index 0000000000..c4a8faa3f0
--- /dev/null
+++ b/ui/shared/entities/userOp/UserOpEntity.pw.tsx
@@ -0,0 +1,72 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+import UserOpEntity from './UserOpEntity';
+
+const hash = '0x376db52955d5bce114d0ccea2dcf22289b4eae1b86bcae5a59bb5fdbfef48899';
+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(
+
+
+ ,
+ );
+
+ await expect(component).toHaveScreenshot();
+ });
+ });
+});
+
+test('loading', async({ mount }) => {
+ const component = await mount(
+
+
+ ,
+ );
+
+ await expect(component).toHaveScreenshot();
+});
+
+test('with copy +@dark-mode', async({ mount }) => {
+ const component = await mount(
+
+
+ ,
+ );
+
+ await component.getByText(hash.slice(0, 4)).hover();
+
+ await expect(component).toHaveScreenshot();
+});
+
+test('customization', async({ mount }) => {
+ const component = await mount(
+
+
+ ,
+ );
+
+ await expect(component).toHaveScreenshot();
+});
diff --git a/ui/shared/entities/userOp/UserOpEntity.tsx b/ui/shared/entities/userOp/UserOpEntity.tsx
new file mode 100644
index 0000000000..c4a9022d31
--- /dev/null
+++ b/ui/shared/entities/userOp/UserOpEntity.tsx
@@ -0,0 +1,90 @@
+import { chakra } from '@chakra-ui/react';
+import _omit from 'lodash/omit';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import * as EntityBase from 'ui/shared/entities/base/components';
+
+type LinkProps = EntityBase.LinkBaseProps & Pick;
+
+const Link = chakra((props: LinkProps) => {
+ const defaultHref = route({ pathname: '/op/[hash]', query: { hash: props.hash } });
+
+ return (
+
+ { props.children }
+
+ );
+});
+
+type IconProps = Omit & {
+ name?: EntityBase.IconBaseProps['name'];
+};
+
+const Icon = (props: IconProps) => {
+ return (
+
+ );
+};
+
+type ContentProps = Omit & Pick;
+
+const Content = chakra((props: ContentProps) => {
+ return (
+
+ );
+});
+
+type CopyProps = Omit & Pick;
+
+const Copy = (props: CopyProps) => {
+ return (
+
+ );
+};
+
+const Container = EntityBase.Container;
+
+export interface EntityProps extends EntityBase.EntityBaseProps {
+ hash: string;
+}
+
+const UserOpEntity = (props: EntityProps) => {
+ const linkProps = _omit(props, [ 'className' ]);
+ const partsProps = _omit(props, [ 'className', 'onClick' ]);
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export default React.memo(chakra(UserOpEntity));
+
+export {
+ Container,
+ Link,
+ Icon,
+ Content,
+ Copy,
+};
diff --git a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_dark-color-mode_with-copy-dark-mode-1.png b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_dark-color-mode_with-copy-dark-mode-1.png
new file mode 100644
index 0000000000..062b6aff57
Binary files /dev/null and b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_dark-color-mode_with-copy-dark-mode-1.png differ
diff --git a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_customization-1.png b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_customization-1.png
new file mode 100644
index 0000000000..fec63db3dc
Binary files /dev/null and b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_customization-1.png differ
diff --git a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-lg-1.png b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-lg-1.png
new file mode 100644
index 0000000000..dfe8149bbf
Binary files /dev/null and b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-lg-1.png differ
diff --git a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-md-1.png b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-md-1.png
new file mode 100644
index 0000000000..4f855b2ff2
Binary files /dev/null and b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_icon-size-md-1.png differ
diff --git a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_loading-1.png b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_loading-1.png
new file mode 100644
index 0000000000..67273105f8
Binary files /dev/null and b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_loading-1.png differ
diff --git a/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_with-copy-dark-mode-1.png b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_with-copy-dark-mode-1.png
new file mode 100644
index 0000000000..ae8e9976e1
Binary files /dev/null and b/ui/shared/entities/userOp/__screenshots__/UserOpEntity.pw.tsx_default_with-copy-dark-mode-1.png differ
diff --git a/ui/shared/search/utils.ts b/ui/shared/search/utils.ts
index dd900e60c3..652c973ebd 100644
--- a/ui/shared/search/utils.ts
+++ b/ui/shared/search/utils.ts
@@ -1,7 +1,9 @@
import type { SearchResultItem } from 'types/api/search';
import type { MarketplaceAppOverview } from 'types/client/marketplace';
-export type ApiCategory = 'token' | 'nft' | 'address' | 'public_tag' | 'transaction' | 'block';
+import config from 'configs/app';
+
+export type ApiCategory = 'token' | 'nft' | 'address' | 'public_tag' | 'transaction' | 'block' | 'user_operation';
export type Category = ApiCategory | 'app';
export type ItemsCategoriesMap =
@@ -23,6 +25,10 @@ export const searchCategories: Array<{id: Category; title: string }> = [
{ id: 'block', title: 'Blocks' },
];
+if (config.features.userOps.isEnabled) {
+ searchCategories.push({ id: 'user_operation', title: 'User operations' });
+}
+
export const searchItemTitles: Record = {
app: { itemTitle: 'App', itemTitleShort: 'App' },
token: { itemTitle: 'Token', itemTitleShort: 'Token' },
@@ -31,6 +37,7 @@ export const searchItemTitles: Record {
+ let text: string = sponsorType;
+ switch (sponsorType) {
+ case 'paymaster_hybrid':
+ text = 'Paymaster hybrid';
+ break;
+ case 'paymaster_sponsor':
+ text = 'Paymaster sponsor';
+ break;
+ case 'wallet_balance':
+ text = 'Wallet balance';
+ break;
+ case 'wallet_deposit':
+ text = 'Wallet deposit';
+ }
+ return { text };
+};
+
+export default UserOpSponsorType;
diff --git a/ui/shared/userOps/UserOpStatus.tsx b/ui/shared/userOps/UserOpStatus.tsx
new file mode 100644
index 0000000000..6c3a00d40b
--- /dev/null
+++ b/ui/shared/userOps/UserOpStatus.tsx
@@ -0,0 +1,23 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import StatusTag from 'ui/shared/statusTag/StatusTag';
+
+type Props = {
+ status?: boolean;
+ isLoading?: boolean;
+}
+
+const UserOpStatus = ({ status, isLoading }: Props) => {
+ if (status === undefined) {
+ return null;
+ }
+
+ return (
+
+
+
+ );
+};
+
+export default UserOpStatus;
diff --git a/ui/shared/userOps/UserOpsAddress.tsx b/ui/shared/userOps/UserOpsAddress.tsx
new file mode 100644
index 0000000000..73036de756
--- /dev/null
+++ b/ui/shared/userOps/UserOpsAddress.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import type { AddressParamBasic } from 'types/api/addressParams';
+
+import AddressEntity from '../entities/address/AddressEntity';
+import type { EntityProps } from '../entities/address/AddressEntity';
+
+type Props = Omit & {
+ address: string | AddressParamBasic;
+}
+
+const UserOpsAddress = ({ address, ...props }: Props) => {
+ let addressParam;
+ if (typeof address === 'string') {
+ addressParam = { hash: address };
+ } else {
+ addressParam = address;
+ }
+
+ return ;
+};
+
+export default UserOpsAddress;
diff --git a/ui/snippets/searchBar/SearchBar.pw.tsx b/ui/snippets/searchBar/SearchBar.pw.tsx
index c855f37be0..36d78ba514 100644
--- a/ui/snippets/searchBar/SearchBar.pw.tsx
+++ b/ui/snippets/searchBar/SearchBar.pw.tsx
@@ -9,6 +9,7 @@ import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
import TestApp from 'playwright/TestApp';
import * as app from 'playwright/utils/app';
import buildApiUrl from 'playwright/utils/buildApiUrl';
+import * as configs from 'playwright/utils/configs';
import SearchBar from './SearchBar';
@@ -204,6 +205,35 @@ test('search by tx hash +@mobile', async({ mount, page }) => {
await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
});
+const testWithUserOps = base.extend({
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ context: contextWithEnvs(configs.featureEnvs.userOps) as any,
+});
+
+testWithUserOps('search by user op hash +@mobile', async({ mount, page }) => {
+ await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+ status: 200,
+ body: JSON.stringify(textAdMock.duck),
+ }));
+ const API_URL = buildApiUrl('quick_search') + `?q=${ searchMock.tx1.tx_hash }`;
+ await page.route(API_URL, (route) => route.fulfill({
+ status: 200,
+ body: JSON.stringify([
+ searchMock.userOp1,
+ ]),
+ }));
+
+ await mount(
+
+
+ ,
+ );
+ await page.getByPlaceholder(/search/i).type(searchMock.tx1.tx_hash);
+ await page.waitForResponse(API_URL);
+
+ await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
+});
+
test('search with view all link', async({ mount, page }) => {
const API_URL = buildApiUrl('quick_search') + '?q=o';
await page.route(API_URL, (route) => route.fulfill({
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
index d7da026701..48f998ccd1 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
@@ -111,12 +111,12 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
return Something went wrong. Try refreshing the page or come back later.;
}
- if (!query.data || query.data.length === 0) {
+ const resultCategories = searchCategories.filter(cat => itemsGroups[cat.id]);
+
+ if (resultCategories.length === 0) {
return No results found.;
}
- const resultCategories = searchCategories.filter(cat => itemsGroups[cat.id]);
-
return (
<>
{ resultCategories.length > 1 && (
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx
index 530980cdc2..e6dde430ab 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx
@@ -12,6 +12,7 @@ import SearchBarSuggestItemLink from './SearchBarSuggestItemLink';
import SearchBarSuggestLabel from './SearchBarSuggestLabel';
import SearchBarSuggestToken from './SearchBarSuggestToken';
import SearchBarSuggestTx from './SearchBarSuggestTx';
+import SearchBarSuggestUserOp from './SearchBarSuggestUserOp';
interface Props {
data: SearchResultItem;
@@ -38,6 +39,9 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick }: Props) =>
case 'block': {
return route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block_hash) } });
}
+ case 'user_operation': {
+ return route({ pathname: '/op/[hash]', query: { hash: data.user_operation_hash } });
+ }
}
})();
@@ -60,6 +64,9 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick }: Props) =>
case 'transaction': {
return ;
}
+ case 'user_operation': {
+ return ;
+ }
}
})();
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestUserOp.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestUserOp.tsx
new file mode 100644
index 0000000000..21e0701822
--- /dev/null
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestUserOp.tsx
@@ -0,0 +1,48 @@
+import { chakra, Text, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SearchResultUserOp } from 'types/api/search';
+
+import dayjs from 'lib/date/dayjs';
+import * as UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+
+interface Props {
+ data: SearchResultUserOp;
+ isMobile: boolean | undefined;
+ searchTerm: string;
+}
+
+const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
+ const icon = ;
+ const hash = (
+
+
+
+ );
+ const date = dayjs(data.timestamp).format('llll');
+
+ if (isMobile) {
+ return (
+ <>
+
+ { icon }
+ { hash }
+
+ { date }
+
+ );
+ }
+
+ return (
+
+
+ { icon }
+ { hash }
+
+ { date }
+
+ );
+};
+
+export default React.memo(SearchBarSuggestTx);
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-user-op-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-user-op-hash-mobile-1.png
new file mode 100644
index 0000000000..73f86b73a5
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-user-op-hash-mobile-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png
new file mode 100644
index 0000000000..065edb5197
Binary files /dev/null and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png differ
diff --git a/ui/tx/TxDetails.tsx b/ui/tx/TxDetails.tsx
index 7a8e8afb89..582c0cb0ca 100644
--- a/ui/tx/TxDetails.tsx
+++ b/ui/tx/TxDetails.tsx
@@ -22,7 +22,6 @@ import { route } from 'nextjs-routes';
import config from 'configs/app';
import { WEI, WEI_IN_GWEI } from 'lib/consts';
-import dayjs from 'lib/date/dayjs';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
@@ -34,6 +33,7 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
+import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import ZkEvmBatchEntityL2 from 'ui/shared/entities/block/ZkEvmBatchEntityL2';
@@ -226,10 +226,7 @@ const TxDetails = () => {
hint="Date & time of transaction inclusion, including length of time for confirmation"
isLoading={ isPlaceholderData }
>
-
- { dayjs(data.timestamp).fromNow() }
-
- { dayjs(data.timestamp).format('llll') }
+
{ getConfirmationDuration(data.confirmation_duration) }
diff --git a/ui/tx/TxLogs.tsx b/ui/tx/TxLogs.tsx
index 68af313493..9136de2712 100644
--- a/ui/tx/TxLogs.tsx
+++ b/ui/tx/TxLogs.tsx
@@ -1,6 +1,8 @@
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 ;
}
- if (!data?.items.length) {
+ let items: Array = [];
+
+ if (data?.items) {
+ if (isPlaceholderData) {
+ items = data?.items;
+ } else {
+ items = logsFilter ? data.items.filter(logsFilter) : data.items;
+ }
+ }
+
+ if (!items.length) {
return There are no logs for this transaction.;
}
@@ -43,7 +60,7 @@ const TxLogs = () => {
) }
- { data?.items.map((item, index) => ) }
+ { items.map((item, index) => ) }
);
};
diff --git a/ui/tx/TxTokenTransfer.tsx b/ui/tx/TxTokenTransfer.tsx
index 834b601ccf..2f41299539 100644
--- a/ui/tx/TxTokenTransfer.tsx
+++ b/ui/tx/TxTokenTransfer.tsx
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
import React from 'react';
import type { TokenType } from 'types/api/token';
+import type { TokenTransfer } from 'types/api/tokenTransfer';
import { SECOND } from 'lib/consts';
import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
@@ -23,8 +24,13 @@ import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
const getTokenFilterValue = (getFilterValuesFromQuery