diff --git a/ui/l2Deposits/DepositsTableItem.tsx b/ui/l2Deposits/DepositsTableItem.tsx
index 99ba9ad465..2c9f437ab7 100644
--- a/ui/l2Deposits/DepositsTableItem.tsx
+++ b/ui/l2Deposits/DepositsTableItem.tsx
@@ -56,7 +56,7 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
>;
+}
+
+const NameDomainDetails = ({ query }: Props) => {
+ const isLoading = query.isPlaceholderData;
+
+ const otherAddresses = Object.entries(query.data?.other_addresses ?? {});
+ const hasExpired = query.data?.expiry_date && dayjs(query.data.expiry_date).isBefore(dayjs());
+
+ return (
+
+ { query.data?.registration_date && (
+
+
+
+ { dayjs(query.data.registration_date).format('llll') }
+
+
+ ) }
+ { query.data?.expiry_date && (
+
+
+ { hasExpired && (
+ <>
+
+ { dayjs(query.data.expiry_date).fromNow() }
+
+
+
+ ) }
+
+ { dayjs(query.data.expiry_date).format('llll') }
+
+
+
+
+
+
+ ) }
+ { query.data?.registrant && (
+
+
+
+
+
+
+
+
+ ) }
+ { query.data?.owner && (
+
+
+
+
+
+
+
+
+ ) }
+ { query.data?.wrapped_owner && (
+
+
+
+
+
+
+
+
+ ) }
+ { query.data?.tokens.map((token) => (
+
+
+
+ )) }
+ { otherAddresses.length > 0 && (
+
+ { otherAddresses.map(([ type, address ]) => (
+
+ { type }
+
+
+ )) }
+
+ ) }
+
+ );
+};
+
+export default React.memo(NameDomainDetails);
diff --git a/ui/nameDomain/NameDomainExpiryStatus.tsx b/ui/nameDomain/NameDomainExpiryStatus.tsx
new file mode 100644
index 0000000000..4a6460d068
--- /dev/null
+++ b/ui/nameDomain/NameDomainExpiryStatus.tsx
@@ -0,0 +1,29 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import dayjs from 'lib/date/dayjs';
+
+interface Props {
+ date: string | undefined;
+}
+
+const NameDomainExpiryStatus = ({ date }: Props) => {
+ if (!date) {
+ return null;
+ }
+
+ const hasExpired = dayjs(date).isBefore(dayjs());
+
+ if (hasExpired) {
+ return Expired;
+ }
+
+ const diff = dayjs(date).diff(dayjs(), 'day');
+ if (diff < 30) {
+ return { diff } days left;
+ }
+
+ return Expires { dayjs(date).fromNow() };
+};
+
+export default React.memo(NameDomainExpiryStatus);
diff --git a/ui/nameDomain/NameDomainHistory.tsx b/ui/nameDomain/NameDomainHistory.tsx
new file mode 100644
index 0000000000..ba5747ad46
--- /dev/null
+++ b/ui/nameDomain/NameDomainHistory.tsx
@@ -0,0 +1,67 @@
+import { Box, Hide, Show } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { ENS_DOMAIN_EVENT } from 'stubs/ENS';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+
+import NameDomainHistoryListItem from './history/NameDomainHistoryListItem';
+import NameDomainHistoryTable from './history/NameDomainHistoryTable';
+import { getNextSortValue, type Sort, type SortField } from './history/utils';
+
+const NameDomainHistory = () => {
+ const router = useRouter();
+ const domainName = getQueryParamString(router.query.name);
+
+ const [ sort, setSort ] = React.useState();
+
+ const { isPlaceholderData, isError, data } = useApiQuery('domain_events', {
+ pathParams: { name: domainName, chainId: config.chain.id },
+ queryOptions: {
+ placeholderData: { items: Array(4).fill(ENS_DOMAIN_EVENT) },
+ },
+ });
+
+ const handleSortToggle = React.useCallback((event: React.MouseEvent) => {
+ if (isPlaceholderData) {
+ return;
+ }
+ const field = (event.currentTarget as HTMLDivElement).getAttribute('data-field') as SortField | undefined;
+
+ if (field) {
+ setSort(getNextSortValue(field));
+ }
+ }, [ isPlaceholderData ]);
+
+ const content = (
+ <>
+
+
+ { data?.items.map((item, index) => ) }
+
+
+
+
+
+
+ );
+
+ return (
+
+ );
+};
+
+export default React.memo(NameDomainHistory);
diff --git a/ui/nameDomain/history/NameDomainHistoryListItem.tsx b/ui/nameDomain/history/NameDomainHistoryListItem.tsx
new file mode 100644
index 0000000000..afa2e526b3
--- /dev/null
+++ b/ui/nameDomain/history/NameDomainHistoryListItem.tsx
@@ -0,0 +1,52 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EnsDomainEvent } from 'types/api/ens';
+
+import dayjs from 'lib/date/dayjs';
+import Tag from 'ui/shared/chakra/Tag';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+
+type Props = EnsDomainEvent & {
+ isLoading?: boolean;
+}
+
+const NameDomainHistoryListItem = ({ isLoading, transaction_hash: transactionHash, timestamp, from_address: fromAddress, action }: Props) => {
+ return (
+
+ Txn hash
+
+
+
+
+ Age
+
+
+ { dayjs(timestamp).fromNow() }
+
+
+
+ { fromAddress && (
+ <>
+ From
+
+
+
+
+ ) }
+
+ { action && (
+ <>
+ Method
+
+ { action }
+
+
+ ) }
+
+ );
+};
+
+export default React.memo(NameDomainHistoryListItem);
diff --git a/ui/nameDomain/history/NameDomainHistoryTable.tsx b/ui/nameDomain/history/NameDomainHistoryTable.tsx
new file mode 100644
index 0000000000..f6560372eb
--- /dev/null
+++ b/ui/nameDomain/history/NameDomainHistoryTable.tsx
@@ -0,0 +1,60 @@
+import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EnsDomainEventsResponse } from 'types/api/ens';
+
+import IconSvg from 'ui/shared/IconSvg';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import NameDomainHistoryTableItem from './NameDomainHistoryTableItem';
+import type { Sort } from './utils';
+import { sortFn } from './utils';
+
+interface Props {
+ data: EnsDomainEventsResponse | undefined;
+ isLoading?: boolean;
+ sort: Sort | undefined;
+ onSortToggle: (event: React.MouseEvent) => void;
+}
+
+const NameDomainHistoryTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
+ const sortIconTransform = sort?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
+
+ return (
+
+
+
+ | Txn hash |
+
+
+ { sort?.includes('timestamp') && (
+
+ ) }
+ Age
+
+ |
+ From |
+ Method |
+
+
+
+ {
+ data?.items
+ .slice()
+ .sort(sortFn(sort))
+ .map((item, index) => )
+ }
+
+
+ );
+};
+
+export default React.memo(NameDomainHistoryTable);
diff --git a/ui/nameDomain/history/NameDomainHistoryTableItem.tsx b/ui/nameDomain/history/NameDomainHistoryTableItem.tsx
new file mode 100644
index 0000000000..d52e4626ca
--- /dev/null
+++ b/ui/nameDomain/history/NameDomainHistoryTableItem.tsx
@@ -0,0 +1,37 @@
+import { Tr, Td, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EnsDomainEvent } from 'types/api/ens';
+
+import dayjs from 'lib/date/dayjs';
+import Tag from 'ui/shared/chakra/Tag';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
+
+type Props = EnsDomainEvent & {
+ isLoading?: boolean;
+}
+
+const NameDomainHistoryTableItem = ({ isLoading, transaction_hash: transactionHash, from_address: fromAddress, action, timestamp }: Props) => {
+
+ return (
+
+ |
+
+ |
+
+
+ { dayjs(timestamp).fromNow() }
+
+ |
+
+ { fromAddress && }
+ |
+
+ { action && { action } }
+ |
+
+ );
+};
+
+export default React.memo(NameDomainHistoryTableItem);
diff --git a/ui/nameDomain/history/utils.ts b/ui/nameDomain/history/utils.ts
new file mode 100644
index 0000000000..168050df2d
--- /dev/null
+++ b/ui/nameDomain/history/utils.ts
@@ -0,0 +1,27 @@
+import type { EnsDomainEvent } from 'types/api/ens';
+
+import getNextSortValueShared from 'ui/shared/sort/getNextSortValue';
+
+export type SortField = 'timestamp';
+export type Sort = `${ SortField }-asc` | `${ SortField }-desc`;
+
+const SORT_SEQUENCE: Record> = {
+ timestamp: [ 'timestamp-desc', 'timestamp-asc', undefined ],
+};
+
+export const getNextSortValue = (getNextSortValueShared).bind(undefined, SORT_SEQUENCE);
+
+export const sortFn = (sort: Sort | undefined) => (a: EnsDomainEvent, b: EnsDomainEvent) => {
+ switch (sort) {
+ case 'timestamp-asc': {
+ return b.timestamp.localeCompare(a.timestamp);
+ }
+
+ case 'timestamp-desc': {
+ return a.timestamp.localeCompare(b.timestamp);
+ }
+
+ default:
+ return 0;
+ }
+};
diff --git a/ui/nameDomains/NameDomainsActionBar.tsx b/ui/nameDomains/NameDomainsActionBar.tsx
new file mode 100644
index 0000000000..ff57107799
--- /dev/null
+++ b/ui/nameDomains/NameDomainsActionBar.tsx
@@ -0,0 +1,113 @@
+import { Checkbox, CheckboxGroup, HStack, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EnsDomainLookupFiltersOptions } from 'types/api/ens';
+import type { PaginationParams } from 'ui/shared/pagination/types';
+
+import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
+import ActionBar from 'ui/shared/ActionBar';
+import FilterInput from 'ui/shared/filters/FilterInput';
+import PopoverFilter from 'ui/shared/filters/PopoverFilter';
+import Pagination from 'ui/shared/pagination/Pagination';
+import Sort from 'ui/shared/sort/Sort';
+
+import type { Sort as TSort } from './utils';
+import { SORT_OPTIONS } from './utils';
+
+interface Props {
+ pagination: PaginationParams;
+ searchTerm: string | undefined;
+ onSearchChange: (value: string) => void;
+ filterValue: EnsDomainLookupFiltersOptions;
+ onFilterValueChange: (nextValue: EnsDomainLookupFiltersOptions) => void;
+ sort: TSort | undefined;
+ onSortChange: (nextValue: TSort | undefined) => void;
+ isLoading: boolean;
+ isAddressSearch: boolean;
+}
+
+const NameDomainsActionBar = ({
+ searchTerm,
+ onSearchChange,
+ filterValue,
+ onFilterValueChange,
+ sort,
+ onSortChange,
+ isLoading,
+ isAddressSearch,
+ pagination,
+}: Props) => {
+ const isInitialLoading = useIsInitialLoading(isLoading);
+
+ const searchInput = (
+
+ );
+
+ const filter = (
+
+
+
+ Address
+
+ Owned by
+
+
+ Resolved to address
+
+ Status
+
+ Include expired
+
+
+
+
+ );
+
+ const sortButton = (
+
+ );
+
+ return (
+ <>
+
+ { filter }
+ { sortButton }
+ { searchInput }
+
+
+
+ { filter }
+ { searchInput }
+
+
+
+
+ );
+};
+
+export default React.memo(NameDomainsActionBar);
diff --git a/ui/nameDomains/NameDomainsListItem.tsx b/ui/nameDomains/NameDomainsListItem.tsx
new file mode 100644
index 0000000000..ac7275d9cc
--- /dev/null
+++ b/ui/nameDomains/NameDomainsListItem.tsx
@@ -0,0 +1,60 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EnsDomain } from 'types/api/ens';
+
+import dayjs from 'lib/date/dayjs';
+import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+
+interface Props extends EnsDomain {
+ isLoading: boolean;
+}
+
+const NameDomainsListItem = ({ name, isLoading, resolved_address: resolvedAddress, registration_date: registrationDate, expiry_date: expiryDate }: Props) => {
+ return (
+
+ Domain
+
+
+
+
+ { resolvedAddress && (
+ <>
+ Address
+
+
+
+
+ ) }
+
+ { registrationDate && (
+ <>
+ Registered on
+
+
+ { dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }
+ { dayjs(registrationDate).fromNow() }
+
+
+
+ ) }
+
+ { expiryDate && (
+ <>
+ Expiration date
+
+
+ { dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') }
+
+
+
+
+ ) }
+
+ );
+};
+
+export default React.memo(NameDomainsListItem);
diff --git a/ui/nameDomains/NameDomainsTable.tsx b/ui/nameDomains/NameDomainsTable.tsx
new file mode 100644
index 0000000000..ec46b7cec8
--- /dev/null
+++ b/ui/nameDomains/NameDomainsTable.tsx
@@ -0,0 +1,54 @@
+import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EnsDomainLookupResponse } from 'types/api/ens';
+
+import IconSvg from 'ui/shared/IconSvg';
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import NameDomainsTableItem from './NameDomainsTableItem';
+import { type Sort } from './utils';
+
+interface Props {
+ data: EnsDomainLookupResponse | undefined;
+ isLoading?: boolean;
+ sort: Sort | undefined;
+ onSortToggle: (event: React.MouseEvent) => void;
+}
+
+const NameDomainsTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
+ const sortIconTransform = sort?.toLowerCase().includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
+
+ return (
+
+
+
+ | Domain |
+ Address |
+
+
+ { sort?.includes('registration_date') && (
+
+ ) }
+ Registered on
+
+ |
+ Expiration date |
+
+
+
+ { data?.items.map((item, index) => ) }
+
+
+ );
+};
+
+export default React.memo(NameDomainsTable);
diff --git a/ui/nameDomains/NameDomainsTableItem.tsx b/ui/nameDomains/NameDomainsTableItem.tsx
new file mode 100644
index 0000000000..a4147ae8cf
--- /dev/null
+++ b/ui/nameDomains/NameDomainsTableItem.tsx
@@ -0,0 +1,45 @@
+import { chakra, Tr, Td, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { EnsDomain } from 'types/api/ens';
+
+import dayjs from 'lib/date/dayjs';
+import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
+
+type Props = EnsDomain & {
+ isLoading?: boolean;
+}
+
+const NameDomainsTableItem = ({ isLoading, name, resolved_address: resolvedAddress, registration_date: registrationDate, expiry_date: expiryDate }: Props) => {
+
+ return (
+
+ |
+
+ |
+
+ { resolvedAddress && }
+ |
+
+ { registrationDate && (
+
+ { dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }
+ { dayjs(registrationDate).fromNow() }
+
+ ) }
+ |
+
+ { expiryDate && (
+
+ { dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') }
+
+
+ ) }
+ |
+
+ );
+};
+
+export default React.memo(NameDomainsTableItem);
diff --git a/ui/nameDomains/utils.ts b/ui/nameDomains/utils.ts
new file mode 100644
index 0000000000..c240e5c93e
--- /dev/null
+++ b/ui/nameDomains/utils.ts
@@ -0,0 +1,19 @@
+import type { EnsLookupSorting } from 'types/api/ens';
+
+import getNextSortValueShared from 'ui/shared/sort/getNextSortValue';
+import type { Option } from 'ui/shared/sort/Sort';
+
+export type SortField = EnsLookupSorting['sort'];
+export type Sort = `${ EnsLookupSorting['sort'] }-${ EnsLookupSorting['order'] }`;
+
+export const SORT_OPTIONS: Array> = [
+ { title: 'Default', id: undefined },
+ { title: 'Registered on descending', id: 'registration_date-DESC' },
+ { title: 'Registered on ascending', id: 'registration_date-ASC' },
+];
+
+const SORT_SEQUENCE: Record> = {
+ registration_date: [ 'registration_date-DESC', 'registration_date-ASC', undefined ],
+};
+
+export const getNextSortValue = (getNextSortValueShared).bind(undefined, SORT_SEQUENCE);
diff --git a/ui/pages/Accounts.pw.tsx b/ui/pages/Accounts.pw.tsx
index 84072417be..77eb639235 100644
--- a/ui/pages/Accounts.pw.tsx
+++ b/ui/pages/Accounts.pw.tsx
@@ -21,6 +21,7 @@ const addresses: AddressesResponse = {
...addressMocks.token,
tx_count: '109123890123',
coin_balance: '22222345678901234567890000',
+ ens_domain_name: null,
}, {
...addressMocks.withoutName,
tx_count: '11',
diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx
index f5e75429f1..c0cf60c530 100644
--- a/ui/pages/Address.tsx
+++ b/ui/pages/Address.tsx
@@ -23,11 +23,13 @@ import AddressTxs from 'ui/address/AddressTxs';
import AddressWithdrawals from 'ui/address/AddressWithdrawals';
import AddressFavoriteButton from 'ui/address/details/AddressFavoriteButton';
import AddressQrCode from 'ui/address/details/AddressQrCode';
+import AddressEnsDomains from 'ui/address/ensDomains/AddressEnsDomains';
import SolidityscanReport from 'ui/address/SolidityscanReport';
import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
import TextAd from 'ui/shared/ad/TextAd';
import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
import EntityTags from 'ui/shared/EntityTags';
import IconSvg from 'ui/shared/IconSvg';
import NetworkExplorers from 'ui/shared/NetworkExplorers';
@@ -172,14 +174,25 @@ const AddressPageContent = () => {
const titleSecondRow = (
+ { addressQuery.data?.ens_domain_name && (
+
+ ) }
{ !isLoading && addressQuery.data?.is_contract && addressQuery.data.token &&
}
@@ -190,6 +203,8 @@ const AddressPageContent = () => {
{ addressQuery.data?.is_contract && addressQuery.data?.is_verified && config.UI.views.address.solidityscanEnabled && }
+ { !isLoading && addressQuery.data && config.features.nameService.isEnabled &&
+ }
);
diff --git a/ui/pages/NameDomain.pw.tsx b/ui/pages/NameDomain.pw.tsx
new file mode 100644
index 0000000000..d91b3297b5
--- /dev/null
+++ b/ui/pages/NameDomain.pw.tsx
@@ -0,0 +1,79 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import config from 'configs/app';
+import * as textAdMock from 'mocks/ad/textAd';
+import * as ensDomainMock from 'mocks/ens/domain';
+import * as ensDomainEventsMock from 'mocks/ens/events';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import NameDomain from './NameDomain';
+
+const DOMAIN_API_URL = buildApiUrl('domain_info', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
+const DOMAIN_EVENTS_API_URL = buildApiUrl('domain_events', { chainId: config.chain.id, name: ensDomainMock.ensDomainA.name });
+
+test.beforeEach(async({ page }) => {
+ await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+ status: 200,
+ body: JSON.stringify(textAdMock.duck),
+ }));
+ await page.route(textAdMock.duck.ad.thumbnail, (route) => {
+ return route.fulfill({
+ status: 200,
+ path: './playwright/mocks/image_s.jpg',
+ });
+ });
+});
+
+test('details tab', async({ mount, page }) => {
+ await page.route(DOMAIN_API_URL, (route) => route.fulfill({
+ status: 200,
+ body: JSON.stringify(ensDomainMock.ensDomainA),
+ }));
+
+ const component = await mount(
+
+
+ ,
+ { hooksConfig: {
+ router: {
+ query: { name: ensDomainMock.ensDomainA.name },
+ isReady: true,
+ },
+ } },
+ );
+
+ await expect(component).toHaveScreenshot();
+});
+
+test('history tab +@mobile', async({ mount, page }) => {
+ await page.route(DOMAIN_API_URL, (route) => route.fulfill({
+ status: 200,
+ body: JSON.stringify(ensDomainMock.ensDomainA),
+ }));
+ await page.route(DOMAIN_EVENTS_API_URL, (route) => route.fulfill({
+ status: 200,
+ body: JSON.stringify({
+ items: [
+ ensDomainEventsMock.ensDomainEventA,
+ ensDomainEventsMock.ensDomainEventB,
+ ],
+ totalRecords: 2,
+ }),
+ }));
+
+ const component = await mount(
+
+
+ ,
+ { hooksConfig: {
+ router: {
+ query: { name: ensDomainMock.ensDomainA.name, tab: 'history' },
+ isReady: true,
+ },
+ } },
+ );
+
+ await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/NameDomain.tsx b/ui/pages/NameDomain.tsx
new file mode 100644
index 0000000000..b00cec0bbf
--- /dev/null
+++ b/ui/pages/NameDomain.tsx
@@ -0,0 +1,95 @@
+import { Flex, Tooltip } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { RoutedTab } from 'ui/shared/Tabs/types';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { ENS_DOMAIN } from 'stubs/ENS';
+import NameDomainDetails from 'ui/nameDomain/NameDomainDetails';
+import NameDomainHistory from 'ui/nameDomain/NameDomainHistory';
+import TextAd from 'ui/shared/ad/TextAd';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/LinkInternal';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
+import useTabIndexFromQuery from 'ui/shared/Tabs/useTabIndexFromQuery';
+
+const NameDomain = () => {
+ const isMobile = useIsMobile();
+ const router = useRouter();
+ const domainName = getQueryParamString(router.query.name);
+
+ const infoQuery = useApiQuery('domain_info', {
+ pathParams: { name: domainName, chainId: config.chain.id },
+ queryOptions: {
+ placeholderData: ENS_DOMAIN,
+ },
+ });
+
+ const tabs: Array = [
+ { id: 'details', title: 'Details', component: },
+ { id: 'history', title: 'History', component: },
+ ];
+
+ const tabIndex = useTabIndexFromQuery(tabs);
+
+ if (infoQuery.isError) {
+ throw new Error(undefined, { cause: infoQuery.error });
+ }
+
+ const isLoading = infoQuery.isPlaceholderData;
+
+ const titleSecondRow = (
+
+
+ { infoQuery.data?.resolved_address && (
+
+ ) }
+ { infoQuery.data?.resolved_address && (
+
+
+
+
+
+ ) }
+
+ );
+
+ return (
+ <>
+
+
+ { infoQuery.isPlaceholderData ? (
+ <>
+
+ { tabs[tabIndex]?.component }
+
+ ) : }
+
+ );
+};
+
+export default NameDomain;
diff --git a/ui/pages/NameDomains.pw.tsx b/ui/pages/NameDomains.pw.tsx
new file mode 100644
index 0000000000..6a522b6faf
--- /dev/null
+++ b/ui/pages/NameDomains.pw.tsx
@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import config from 'configs/app';
+import * as textAdMock from 'mocks/ad/textAd';
+import * as ensDomainMock from 'mocks/ens/domain';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import NameDomains from './NameDomains';
+
+const DOMAINS_LOOKUP_API_URL = buildApiUrl('domains_lookup', { chainId: config.chain.id }) + '?only_active=true';
+
+test.beforeEach(async({ page }) => {
+ await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+ status: 200,
+ body: JSON.stringify(textAdMock.duck),
+ }));
+ await page.route(textAdMock.duck.ad.thumbnail, (route) => {
+ return route.fulfill({
+ status: 200,
+ path: './playwright/mocks/image_s.jpg',
+ });
+ });
+});
+
+test('default view +@mobile', async({ mount, page }) => {
+ await page.route(DOMAINS_LOOKUP_API_URL, (route) => route.fulfill({
+ status: 200,
+ body: JSON.stringify({
+ items: [
+ ensDomainMock.ensDomainA,
+ ensDomainMock.ensDomainB,
+ ensDomainMock.ensDomainC,
+ ensDomainMock.ensDomainD,
+ ],
+ next_page_params: {
+ token_id: '',
+ },
+ }),
+ }));
+
+ const component = await mount(
+
+
+ ,
+ );
+
+ await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/NameDomains.tsx b/ui/pages/NameDomains.tsx
new file mode 100644
index 0000000000..05099a5c24
--- /dev/null
+++ b/ui/pages/NameDomains.tsx
@@ -0,0 +1,212 @@
+import { Box, Hide, Show } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { EnsDomainLookupFiltersOptions, EnsLookupSorting } from 'types/api/ens';
+
+import config from 'configs/app';
+import useDebounce from 'lib/hooks/useDebounce';
+import { apos } from 'lib/html-entities';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { ADDRESS_REGEXP } from 'lib/validations/address';
+import { ENS_DOMAIN } from 'stubs/ENS';
+import { generateListStub } from 'stubs/utils';
+import NameDomainsActionBar from 'ui/nameDomains/NameDomainsActionBar';
+import NameDomainsListItem from 'ui/nameDomains/NameDomainsListItem';
+import NameDomainsTable from 'ui/nameDomains/NameDomainsTable';
+import type { Sort, SortField } from 'ui/nameDomains/utils';
+import { SORT_OPTIONS, getNextSortValue } from 'ui/nameDomains/utils';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
+import getSortValueFromQuery from 'ui/shared/sort/getSortValueFromQuery';
+
+const NameDomains = () => {
+ const router = useRouter();
+
+ const q = getQueryParamString(router.query.name) || getQueryParamString(router.query.address);
+ const ownedBy = getQueryParamString(router.query.owned_by);
+ const resolvedTo = getQueryParamString(router.query.resolved_to);
+ const onlyActive = getQueryParamString(router.query.only_active);
+
+ const initialFilters: EnsDomainLookupFiltersOptions = [
+ ownedBy === 'true' ? 'owned_by' as const : undefined,
+ resolvedTo === 'true' ? 'resolved_to' as const : undefined,
+ onlyActive === 'false' ? 'with_inactive' as const : undefined,
+ ].filter(Boolean);
+ const initialSort = getSortValueFromQuery(router.query, SORT_OPTIONS);
+
+ const [ searchTerm, setSearchTerm ] = React.useState(q || '');
+ const [ filterValue, setFilterValue ] = React.useState(initialFilters);
+ const [ sort, setSort ] = React.useState(initialSort);
+
+ const debouncedSearchTerm = useDebounce(searchTerm, 300);
+ const isAddressSearch = React.useMemo(() => ADDRESS_REGEXP.test(debouncedSearchTerm), [ debouncedSearchTerm ]);
+ const sortParams = getSortParamsFromValue(sort);
+
+ const addressesLookupQuery = useQueryWithPages({
+ resourceName: 'addresses_lookup',
+ pathParams: { chainId: config.chain.id },
+ filters: {
+ address: debouncedSearchTerm,
+ resolved_to: filterValue.includes('resolved_to'),
+ owned_by: filterValue.includes('owned_by'),
+ only_active: !filterValue.includes('with_inactive'),
+ },
+ sorting: sortParams,
+ options: {
+ enabled: isAddressSearch,
+ placeholderData: generateListStub<'addresses_lookup'>(ENS_DOMAIN, 50, { next_page_params: null }),
+ },
+ });
+
+ const domainsLookupQuery = useQueryWithPages({
+ resourceName: 'domains_lookup',
+ pathParams: { chainId: config.chain.id },
+ filters: {
+ name: debouncedSearchTerm,
+ only_active: !filterValue.includes('with_inactive'),
+ },
+ sorting: sortParams,
+ options: {
+ enabled: !isAddressSearch,
+ placeholderData: generateListStub<'domains_lookup'>(ENS_DOMAIN, 50, { next_page_params: null }),
+ },
+ });
+
+ const query = isAddressSearch ? addressesLookupQuery : domainsLookupQuery;
+ const { data, isError, isPlaceholderData: isLoading, onFilterChange, onSortingChange } = query;
+
+ React.useEffect(() => {
+ const hasInactiveFilter = filterValue.some((value) => value === 'with_inactive');
+ if (isAddressSearch) {
+ setFilterValue([ 'owned_by' as const, 'resolved_to' as const, hasInactiveFilter ? 'with_inactive' as const : undefined ].filter(Boolean));
+ onFilterChange<'addresses_lookup'>({
+ address: debouncedSearchTerm,
+ resolved_to: true,
+ owned_by: true,
+ only_active: !hasInactiveFilter,
+ });
+ } else {
+ setFilterValue([ hasInactiveFilter ? 'with_inactive' as const : undefined ].filter(Boolean));
+ onFilterChange<'domains_lookup'>({
+ name: debouncedSearchTerm,
+ only_active: !hasInactiveFilter,
+ });
+ }
+ // should run only the type of search changes
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [ isAddressSearch ]);
+
+ const handleSortToggle = React.useCallback((event: React.MouseEvent) => {
+ if (isLoading) {
+ return;
+ }
+ const field = (event.currentTarget as HTMLDivElement).getAttribute('data-field') as SortField | undefined;
+
+ if (field) {
+ setSort((prevValue) => {
+ const nextSortValue = getNextSortValue(field)(prevValue);
+ onSortingChange(getSortParamsFromValue(nextSortValue));
+ return nextSortValue;
+ });
+ }
+ }, [ isLoading, onSortingChange ]);
+
+ const handleSearchTermChange = React.useCallback((value: string) => {
+ setSearchTerm(value);
+ const isAddressSearch = ADDRESS_REGEXP.test(value);
+ if (isAddressSearch) {
+ onFilterChange<'addresses_lookup'>({
+ address: value,
+ resolved_to: filterValue.includes('resolved_to'),
+ owned_by: filterValue.includes('owned_by'),
+ only_active: !filterValue.includes('with_inactive'),
+ });
+ } else {
+ onFilterChange<'domains_lookup'>({
+ name: value,
+ only_active: !filterValue.includes('with_inactive'),
+ });
+ }
+ }, [ onFilterChange, filterValue ]);
+
+ const handleFilterValueChange = React.useCallback((value: EnsDomainLookupFiltersOptions) => {
+ setFilterValue(value);
+
+ const isAddressSearch = ADDRESS_REGEXP.test(debouncedSearchTerm);
+ if (isAddressSearch) {
+ onFilterChange<'addresses_lookup'>({
+ address: debouncedSearchTerm,
+ resolved_to: value.includes('resolved_to'),
+ owned_by: value.includes('owned_by'),
+ only_active: !value.includes('with_inactive'),
+ });
+ } else {
+ onFilterChange<'domains_lookup'>({
+ name: debouncedSearchTerm,
+ only_active: !value.includes('with_inactive'),
+ });
+ }
+ }, [ debouncedSearchTerm, onFilterChange ]);
+
+ const hasActiveFilters = Boolean(debouncedSearchTerm) || filterValue.length > 0;
+
+ const content = (
+ <>
+
+
+ { data?.items.map((item, index) => (
+
+ )) }
+
+
+
+
+
+
+ );
+
+ const actionBar = (
+
+ );
+
+ return (
+ <>
+
+
+
+ );
+};
+
+export default NameDomains;
diff --git a/ui/pages/SearchResults.pw.tsx b/ui/pages/SearchResults.pw.tsx
index 4e78e6f35f..a5acddd0ab 100644
--- a/ui/pages/SearchResults.pw.tsx
+++ b/ui/pages/SearchResults.pw.tsx
@@ -32,6 +32,7 @@ test.describe('search by name ', () => {
searchMock.token1,
searchMock.token2,
searchMock.contract1,
+ searchMock.address2,
searchMock.label1,
],
}),
diff --git a/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png b/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png
index 236d307a77..f9ae337b71 100644
Binary files a/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png
index dcf50da8e4..5513a62a55 100644
Binary files a/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png differ
diff --git a/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png
index f90ad744bb..6385a6d305 100644
Binary files a/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png
new file mode 100644
index 0000000000..8cf0c45158
Binary files /dev/null and b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png
new file mode 100644
index 0000000000..9b4e735d67
Binary files /dev/null and b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_history-tab-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png
new file mode 100644
index 0000000000..fd69150bf3
Binary files /dev/null and b/ui/pages/__screenshots__/NameDomain.pw.tsx_mobile_history-tab-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png
new file mode 100644
index 0000000000..1e5d97efd3
Binary files /dev/null and b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png b/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png
new file mode 100644
index 0000000000..63929d04b1
Binary files /dev/null and b/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png
index f218590790..febacb309f 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-name-mobile-dark-mode-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-name-mobile-dark-mode-1.png
index 0f70ac15c8..22a47915c5 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-name-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-name-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-name-mobile-dark-mode-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-name-mobile-dark-mode-1.png
index 4a67cc56a9..d995bb1565 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-name-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-name-mobile-dark-mode-1.png differ
diff --git a/ui/searchResults/SearchResultListItem.tsx b/ui/searchResults/SearchResultListItem.tsx
index b6d14f0a85..340f753219 100644
--- a/ui/searchResults/SearchResultListItem.tsx
+++ b/ui/searchResults/SearchResultListItem.tsx
@@ -1,4 +1,4 @@
-import { Flex, Grid, Image, Box, Text, Skeleton, useColorMode, Tag } from '@chakra-ui/react';
+import { chakra, Flex, Grid, Image, Box, Text, Skeleton, useColorMode, Tag } from '@chakra-ui/react';
import React from 'react';
import xss from 'xss';
@@ -10,6 +10,7 @@ import dayjs from 'lib/date/dayjs';
import highlightText from 'lib/highlightText';
import * as mixpanel from 'lib/mixpanel/index';
import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
+import { ADDRESS_REGEXP } from 'lib/validations/address';
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';
@@ -73,13 +74,14 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
case 'contract':
case 'address': {
- const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
+ const shouldHighlightHash = ADDRESS_REGEXP.test(searchTerm);
const address = {
hash: data.address,
is_contract: data.type === 'contract',
is_verified: data.is_smart_contract_verified,
name: null,
implementation_name: null,
+ ens_domain_name: null,
};
return (
@@ -264,8 +266,23 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
}
case 'contract':
case 'address': {
- const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
- return data.name ? : null;
+ const shouldHighlightHash = ADDRESS_REGEXP.test(searchTerm);
+ const addressName = data.name || data.ens_info?.name;
+ const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
+
+ return addressName ? (
+ <>
+
+ { data.ens_info &&
+ (
+ data.ens_info.names_count > 1 ?
+ ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` }) :
+ { expiresText }
+ )
+ }
+
+ ) :
+ null;
}
default:
diff --git a/ui/searchResults/SearchResultTableItem.tsx b/ui/searchResults/SearchResultTableItem.tsx
index b91e337df8..660c77d2f9 100644
--- a/ui/searchResults/SearchResultTableItem.tsx
+++ b/ui/searchResults/SearchResultTableItem.tsx
@@ -1,4 +1,4 @@
-import { Tr, Td, Text, Flex, Image, Box, Skeleton, useColorMode, Tag } from '@chakra-ui/react';
+import { chakra, Tr, Td, Text, Flex, Image, Box, Skeleton, useColorMode, Tag } from '@chakra-ui/react';
import React from 'react';
import xss from 'xss';
@@ -10,6 +10,7 @@ import dayjs from 'lib/date/dayjs';
import highlightText from 'lib/highlightText';
import * as mixpanel from 'lib/mixpanel/index';
import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
+import { ADDRESS_REGEXP } from 'lib/validations/address';
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';
@@ -20,7 +21,6 @@ import LinkExternal from 'ui/shared/LinkExternal';
import LinkInternal from 'ui/shared/LinkInternal';
import type { SearchResultAppItem } from 'ui/shared/search/utils';
import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
-
interface Props {
data: SearchResultItem | SearchResultAppItem;
searchTerm: string;
@@ -91,70 +91,51 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
case 'contract':
case 'address': {
- if (data.name) {
- const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
- const address = {
- hash: data.address,
- is_contract: data.type === 'contract',
- is_verified: data.is_smart_contract_verified,
- name: null,
- implementation_name: null,
- };
-
- return (
- <>
-
-
-
-
-
-
-
-
- |
-
-
- |
-
- );
- }
-
+ const shouldHighlightHash = ADDRESS_REGEXP.test(searchTerm);
+ const addressName = data.name || data.ens_info?.name;
const address = {
hash: data.address,
is_contract: data.type === 'contract',
is_verified: data.is_smart_contract_verified,
name: null,
implementation_name: null,
+ ens_domain_name: null,
};
+ const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
return (
-
-
-
-
-
+ |
+
+
+
-
-
-
- |
+ onClick={ handleLinkClick }
+ >
+
+
+
+
+ |
+ { addressName && (
+
+
+ { data.ens_info &&
+ (
+ data.ens_info.names_count > 1 ?
+ ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` }) :
+ { expiresText }
+ )
+ }
+ |
+ ) }
+
);
}
diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png
index cb52e15b4d..a678e21e98 100644
Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png differ
diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png
index 76300132d9..5af3308e09 100644
Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png differ
diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png
index 3848d01acb..070d72be06 100644
Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png differ
diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png
index f4549dc16c..9dc83bef17 100644
Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png differ
diff --git a/ui/shared/entities/address/AddressEntity.pw.tsx b/ui/shared/entities/address/AddressEntity.pw.tsx
index 8d7b16e570..e94038817b 100644
--- a/ui/shared/entities/address/AddressEntity.pw.tsx
+++ b/ui/shared/entities/address/AddressEntity.pw.tsx
@@ -80,6 +80,19 @@ test.describe('loading', () => {
await expect(component).toHaveScreenshot();
});
+
+});
+
+test('with ENS', async({ mount }) => {
+ const component = await mount(
+
+
+ ,
+ );
+
+ await expect(component).toHaveScreenshot();
});
test('external link', async({ mount }) => {
diff --git a/ui/shared/entities/address/AddressEntity.tsx b/ui/shared/entities/address/AddressEntity.tsx
index fb46d80a94..4e64a683b5 100644
--- a/ui/shared/entities/address/AddressEntity.tsx
+++ b/ui/shared/entities/address/AddressEntity.tsx
@@ -98,10 +98,11 @@ const Icon = (props: IconProps) => {
type ContentProps = Omit & Pick;
const Content = chakra((props: ContentProps) => {
- if (props.address.name) {
+ if (props.address.name || props.address.ens_domain_name) {
+ const text = props.address.ens_domain_name || props.address.name;
const label = (
- { props.address.name }
+ { text }
{ props.address.hash }
);
@@ -109,7 +110,7 @@ const Content = chakra((props: ContentProps) => {
return (
- { props.address.name }
+ { text }
);
@@ -137,7 +138,7 @@ const Copy = (props: CopyProps) => {
const Container = EntityBase.Container;
export interface EntityProps extends EntityBase.EntityBaseProps {
- address: Pick;
+ address: Pick;
isSafeAddress?: boolean;
}
diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_with-ENS-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_with-ENS-1.png
new file mode 100644
index 0000000000..102632e226
Binary files /dev/null and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_with-ENS-1.png differ
diff --git a/ui/shared/entities/ens/EnsEntity.pw.tsx b/ui/shared/entities/ens/EnsEntity.pw.tsx
new file mode 100644
index 0000000000..fc6d5c01c7
--- /dev/null
+++ b/ui/shared/entities/ens/EnsEntity.pw.tsx
@@ -0,0 +1,70 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+import EnsEntity from './EnsEntity';
+
+const name = 'cat.eth';
+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 long name', async({ mount }) => {
+ const component = await mount(
+
+
+ ,
+ );
+
+ await component.getByText(name.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/ens/EnsEntity.tsx b/ui/shared/entities/ens/EnsEntity.tsx
new file mode 100644
index 0000000000..c0623426c1
--- /dev/null
+++ b/ui/shared/entities/ens/EnsEntity.tsx
@@ -0,0 +1,89 @@
+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';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+type LinkProps = EntityBase.LinkBaseProps & Pick;
+
+const Link = chakra((props: LinkProps) => {
+ const defaultHref = route({ pathname: '/name-domains/[name]', query: { name: props.name } });
+
+ return (
+
+ { props.children }
+
+ );
+});
+
+type IconProps = Omit & {
+ iconName?: 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 {
+ name: string;
+}
+
+const EnsEntity = (props: EntityProps) => {
+ const linkProps = _omit(props, [ 'className' ]);
+ const partsProps = _omit(props, [ 'className', 'onClick' ]);
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export default React.memo(chakra(EnsEntity));
+
+export {
+ Container,
+ Link,
+ Icon,
+ Content,
+ Copy,
+};
diff --git a/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_customization-1.png b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_customization-1.png
new file mode 100644
index 0000000000..30c522addf
Binary files /dev/null and b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_customization-1.png differ
diff --git a/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_icon-size-lg-1.png b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_icon-size-lg-1.png
new file mode 100644
index 0000000000..cd32a435a1
Binary files /dev/null and b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_icon-size-lg-1.png differ
diff --git a/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_icon-size-md-1.png b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_icon-size-md-1.png
new file mode 100644
index 0000000000..aba449d9c1
Binary files /dev/null and b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_icon-size-md-1.png differ
diff --git a/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_loading-1.png b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_loading-1.png
new file mode 100644
index 0000000000..b50a444966
Binary files /dev/null and b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_loading-1.png differ
diff --git a/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_with-long-name-1.png b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_with-long-name-1.png
new file mode 100644
index 0000000000..273fbf9cb9
Binary files /dev/null and b/ui/shared/entities/ens/__screenshots__/EnsEntity.pw.tsx_default_with-long-name-1.png differ
diff --git a/ui/shared/filters/FilterButton.tsx b/ui/shared/filters/FilterButton.tsx
index b75eeb21ed..a61246587c 100644
--- a/ui/shared/filters/FilterButton.tsx
+++ b/ui/shared/filters/FilterButton.tsx
@@ -19,7 +19,7 @@ const FilterButton = ({ isActive, isLoading, appliedFiltersNum, onClick, as }: P
const badgeBgColor = useColorModeValue('blue.700', 'gray.50');
if (isLoading) {
- return ;
+ return ;
}
return (
diff --git a/ui/shared/filters/FilterInput.tsx b/ui/shared/filters/FilterInput.tsx
index 5cfaae212f..5c16f65ce6 100644
--- a/ui/shared/filters/FilterInput.tsx
+++ b/ui/shared/filters/FilterInput.tsx
@@ -37,6 +37,7 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialVal
isLoaded={ !isLoading }
className={ className }
minW="250px"
+ borderRadius="base"
>
{
return (
-
+
{ children }
);
diff --git a/ui/shared/nft/NftMedia.tsx b/ui/shared/nft/NftMedia.tsx
index 9427791f5f..e01569c314 100644
--- a/ui/shared/nft/NftMedia.tsx
+++ b/ui/shared/nft/NftMedia.tsx
@@ -20,13 +20,19 @@ interface Props {
}
const NftMedia = ({ url, className, isLoading, withFullscreen }: Props) => {
- const [ isMediaLoading, setIsMediaLoading ] = React.useState(Boolean(url));
+ const [ isMediaLoading, setIsMediaLoading ] = React.useState(true);
const [ isLoadingError, setIsLoadingError ] = React.useState(false);
const { ref, inView } = useInView({ triggerOnce: true });
const type = useNftMediaType(url, !isLoading && inView);
+ React.useEffect(() => {
+ if (!isLoading) {
+ setIsMediaLoading(Boolean(url));
+ }
+ }, [ isLoading, url ]);
+
const handleMediaLoaded = React.useCallback(() => {
setIsMediaLoading(false);
}, []);
diff --git a/ui/shared/pagination/useQueryWithPages.ts b/ui/shared/pagination/useQueryWithPages.ts
index 8f6edc7a89..847ee3b09d 100644
--- a/ui/shared/pagination/useQueryWithPages.ts
+++ b/ui/shared/pagination/useQueryWithPages.ts
@@ -37,7 +37,7 @@ function getPaginationParamsFromQuery(queryString: string | Array | unde
export type QueryWithPagesResult =
UseQueryResult, ResourceError> &
{
- onFilterChange: (filters: PaginationFilters) => void;
+ onFilterChange: (filters: PaginationFilters) => void;
onSortingChange: (sorting?: PaginationSorting) => void;
pagination: PaginationParams;
}
@@ -136,12 +136,13 @@ export default function useQueryWithPages({
});
}, [ queryClient, resourceName, router, scrollToTop ]);
- const onFilterChange = useCallback((newFilters: PaginationFilters | undefined) => {
+ const onFilterChange = useCallback((newFilters: PaginationFilters | undefined) => {
const newQuery = omit(router.query, 'next_page_params', 'page', resource.filterFields);
if (newFilters) {
Object.entries(newFilters).forEach(([ key, value ]) => {
- if (value && value.length) {
- newQuery[key] = Array.isArray(value) ? value.join(',') : (value || '');
+ const isValidValue = typeof value === 'boolean' || (value && value.length);
+ if (isValidValue) {
+ newQuery[key] = Array.isArray(value) ? value.join(',') : (String(value) || '');
}
});
}
diff --git a/ui/snippets/searchBar/SearchBar.pw.tsx b/ui/snippets/searchBar/SearchBar.pw.tsx
index ca7e6b32f0..6da1396d2f 100644
--- a/ui/snippets/searchBar/SearchBar.pw.tsx
+++ b/ui/snippets/searchBar/SearchBar.pw.tsx
@@ -65,6 +65,7 @@ test('search by contract name +@mobile +@dark-mode', async({ mount, page }) =>
status: 200,
body: JSON.stringify([
searchMock.contract1,
+ searchMock.address2,
]),
}));
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
index 458abb31d1..0a69e99525 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
@@ -1,9 +1,11 @@
-import { Box, Text, Flex } from '@chakra-ui/react';
+import { chakra, Box, Text, Flex } from '@chakra-ui/react';
import React from 'react';
import type { SearchResultAddressOrContract } from 'types/api/search';
+import dayjs from 'lib/date/dayjs';
import highlightText from 'lib/highlightText';
+import { ADDRESS_REGEXP } from 'lib/validations/address';
import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
@@ -14,23 +16,41 @@ interface Props {
}
const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
- const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
+ const shouldHighlightHash = ADDRESS_REGEXP.test(searchTerm);
+
const icon = (
);
- const name = data.name && (
+ const addressName = data.name || data.ens_info?.name;
+ const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
+
+ const nameEl = addressName && (
-
+
+ { data.ens_info &&
+ (
+ data.ens_info.names_count > 1 ?
+ ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` }) :
+ { expiresText }
+ )
+ }
);
- const address = ;
+ const addressEl = ;
if (isMobile) {
return (
@@ -44,10 +64,10 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
whiteSpace="nowrap"
fontWeight={ 700 }
>
- { address }
+ { addressEl }
- { name }
+ { nameEl }
);
}
@@ -63,10 +83,10 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
whiteSpace="nowrap"
fontWeight={ 700 }
>
- { address }
+ { addressEl }
- { name }
+ { nameEl }
);
};
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-contract-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-contract-name-mobile-dark-mode-1.png
index 72ed4ec998..6b1c79a62f 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-contract-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-contract-name-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_scroll-suggest-to-category-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_scroll-suggest-to-category-1.png
index 6a08ad4fb7..9017b6762c 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_scroll-suggest-to-category-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_scroll-suggest-to-category-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png
index 10858ccfc6..89a811c836 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-contract-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-contract-name-mobile-dark-mode-1.png
index a72f116610..4b21e36376 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-contract-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-contract-name-mobile-dark-mode-1.png differ
diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png
index 883558d9aa..a65640db2b 100644
Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png differ
diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png
index 44a65059ad..cab94218e9 100644
Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png differ
diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png
index 5231ad1c6f..5027ffd14d 100644
Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png differ
diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png
index c6add2e46a..16fed052cf 100644
Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png differ
diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png
index 2b6f10df88..ed8a59156a 100644
Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png differ
diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png
index 3d163bd4ef..54ccd232ac 100644
Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png differ
diff --git a/ui/tokens/TokensTableItem.tsx b/ui/tokens/TokensTableItem.tsx
index 37d3f04dee..e8f2916866 100644
--- a/ui/tokens/TokensTableItem.tsx
+++ b/ui/tokens/TokensTableItem.tsx
@@ -48,6 +48,7 @@ const TokensTableItem = ({
implementation_name: null,
is_contract: true,
is_verified: false,
+ ens_domain_name: null,
};
return (
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png
index 68ad19bf42..23463170c8 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png
index e8d07d8ee0..39fb7fb131 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_between-addresses-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_between-addresses-mobile-dark-mode-1.png
index bfc23c2e9c..1f55e5d296 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_between-addresses-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_between-addresses-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_creating-contact-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_creating-contact-1.png
index 26a0a022d2..9541e801e8 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_creating-contact-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_creating-contact-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_l2-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_l2-1.png
index dd560f465d..ff34a9052d 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_l2-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_l2-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_pending-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_pending-1.png
index b8fd8b5594..9c806be32e 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_pending-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_pending-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_stability-customization-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_stability-customization-1.png
index 7f82ce728f..e5288983b3 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_stability-customization-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_stability-customization-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png
index 5e1108feca..16eacff02a 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-decoded-raw-reason-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-decoded-raw-reason-1.png
index 952d53e5dc..38e7b1c439 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-decoded-raw-reason-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-decoded-raw-reason-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-decoded-revert-reason-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-decoded-revert-reason-1.png
index 8c62fbd45b..bac354c208 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-decoded-revert-reason-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-decoded-revert-reason-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-token-transfer-mobile-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-token-transfer-mobile-1.png
index 974f0373e8..e5aa9648eb 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-token-transfer-mobile-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-token-transfer-mobile-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_without-testnet-warning-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_without-testnet-warning-1.png
index 48ac2733f9..0d2911796a 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_without-testnet-warning-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_without-testnet-warning-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png
index d7b8988da4..861cfaa1e4 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png
index c04ced57cd..2e94ad9774 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png differ
diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_with-token-transfer-mobile-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_with-token-transfer-mobile-1.png
index 58863375dd..8d756286ed 100644
Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_with-token-transfer-mobile-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_with-token-transfer-mobile-1.png differ
diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
index 50ff51df8f..c4b277a457 100644
Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png
index 304fba7300..2dac9221c3 100644
Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png
index ac6657a22a..8557a1f28a 100644
Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png differ
diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
index a0d6907004..08323441ca 100644
Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png
index c27152bc67..ec4fb6b415 100644
Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png
index f4a76d6f03..1cfcf7fc1c 100644
Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png and b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png differ
|