migration to new API resources schema

lib/api/buildUrl.ts

@@ -9,7 +9,7 @@ import type { ApiResource, ResourceName, ResourcePathParams } from './resources'
 export default function buildUrl<R extends ResourceName>(
   resourceName: R,
   pathParams?: ResourcePathParams<R>,
-  queryParams?: Record<string, string | Array<string> | number | null | undefined>,
+  queryParams?: Record<string, string | Array<string> | number | boolean | null | undefined>,
 ): string {
   const resource: ApiResource = RESOURCES[resourceName];
   const baseUrl = isNeedProxy() ? config.app.baseUrl : (resource.endpoint || config.api.endpoint);

lib/api/resources.ts

@@ -36,7 +36,15 @@ import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/ch
 import type { BackendVersionConfig } from 'types/api/configs';
 import type { SmartContract, SmartContractReadMethod, SmartContractWriteMethod, SmartContractVerificationConfig, SolidityscanReport } from 'types/api/contract';
 import type { VerifiedContractsResponse, VerifiedContractsFilters, VerifiedContractsCounters } from 'types/api/contracts';
-import type { EnsAddressLookupResponse, EnsDomainDetailed, EnsDomainEventsResponse, EnsDomainLookupResponse } from 'types/api/ens';
+import type {
+  EnsAddressLookupFilters,
+  EnsAddressLookupResponse,
+  EnsDomainDetailed,
+  EnsDomainEventsResponse,
+  EnsDomainLookupFilters,
+  EnsDomainLookupResponse,
+  EnsLookupSorting,
+} from 'types/api/ens';
 import type { IndexingStatus } from 'types/api/indexingStatus';
 import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
 import type { L2DepositsResponse, L2DepositsItem } from 'types/api/l2Deposits';
@@ -182,6 +190,7 @@ export const RESOURCES = {
     pathParams: [ 'chainId' as const ],
     endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
     basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
+    filterFields: [ 'address' as const, 'resolved_to' as const, 'owned_by' as const, 'only_active' as const ],
   },
   domain_info: {
     path: '/api/v1/:chainId/domains/:name',
@@ -200,6 +209,7 @@ export const RESOURCES = {
     pathParams: [ 'chainId' as const ],
     endpoint: getFeaturePayload(config.features.nameService)?.api.endpoint,
     basePath: getFeaturePayload(config.features.nameService)?.api.basePath,
+    filterFields: [ 'name' as const, 'only_active' as const ],
   },
 
   // VISUALIZATION
@@ -636,7 +646,7 @@ export type PaginatedResources = 'blocks' | 'block_txs' |
 'zkevm_l2_txn_batches' | 'zkevm_l2_txn_batch_txs' |
 'withdrawals' | 'address_withdrawals' | 'block_withdrawals' |
 'watchlist' | 'private_tags_address' | 'private_tags_tx' |
-'domain_events' | 'domains_lookup' | 'addresses_lookup';
+'domains_lookup' | 'addresses_lookup';
 
 export type PaginatedResponse<Q extends PaginatedResources> = ResourcePayload<Q>;
 
@@ -757,6 +767,8 @@ Q extends 'token_inventory' ? TokenInventoryFilters :
 Q extends 'tokens' ? TokensFilters :
 Q extends 'tokens_bridged' ? TokensBridgedFilters :
 Q extends 'verified_contracts' ? VerifiedContractsFilters :
+Q extends 'addresses_lookup' ? EnsAddressLookupFilters :
+Q extends 'domains_lookup' ? EnsDomainLookupFilters :
 never;
 /* eslint-enable @typescript-eslint/indent */
 
@@ -766,5 +778,7 @@ Q extends 'tokens' ? TokensSorting :
 Q extends 'tokens_bridged' ? TokensSorting :
 Q extends 'verified_contracts' ? VerifiedContractsSorting :
 Q extends 'address_txs' ? TransactionsSorting :
+Q extends 'addresses_lookup' ? EnsLookupSorting :
+Q extends 'domains_lookup' ? EnsLookupSorting :
 never;
 /* eslint-enable @typescript-eslint/indent */

lib/api/useApiFetch.tsx

@@ -18,7 +18,7 @@ import type { ApiResource, ResourceName, ResourcePathParams } from './resources'
 
 export interface Params<R extends ResourceName> {
   pathParams?: ResourcePathParams<R>;
-  queryParams?: Record<string, string | Array<string> | number | undefined>;
+  queryParams?: Record<string, string | Array<string> | number | boolean | undefined>;
   fetchParams?: Pick<FetchParams, 'body' | 'method' | 'signal'>;
 }
 

mocks/ens/domain.ts

@@ -2,20 +2,20 @@ import type { EnsDomainDetailed } from 'types/api/ens';
 
 export const ensDomainA: EnsDomainDetailed = {
   id: '0xb140bf9645e54f02ed3c1bcc225566b515a98d1688f10494a5c3bc5b447936a7',
-  tokenId: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a6',
+  token_id: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a6',
   name: 'cat.eth',
   registrant: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  resolvedAddress: {
+  resolved_address: {
     hash: '0xfe6ab8a0dafe7d41adf247c210451c264155c9b0',
   },
   owner: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  registrationDate: '2021-06-27T13:34:44.000Z',
-  expiryDate: '2025-03-01T14:20:24.000Z',
-  otherAddresses: {
+  registration_date: '2021-06-27T13:34:44.000Z',
+  expiry_date: '2025-03-01T14:20:24.000Z',
+  other_addresses: {
     ETH: 'fe6ab8a0dafe7d41adf247c210451c264155c9b0',
     GNO: 'DDAfbb505ad214D7b80b1f830fcCc89B60fb7A83',
     NEAR: 'a0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.factory.bridge.near',
@@ -24,50 +24,50 @@ export const ensDomainA: EnsDomainDetailed = {
 
 export const ensDomainB: EnsDomainDetailed = {
   id: '0x632ac7bec8e883416b371b36beaa822f4784208c99d063ee030020e2bd09b885',
-  tokenId: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a7',
+  token_id: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a7',
   name: 'kitty.kitty.kitty.cat.eth',
-  resolvedAddress: null,
+  resolved_address: null,
   registrant: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
   owner: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  registrationDate: '2023-08-13T13:01:12.000Z',
-  expiryDate: null,
-  otherAddresses: {},
+  registration_date: '2023-08-13T13:01:12.000Z',
+  expiry_date: null,
+  other_addresses: {},
 };
 
 export const ensDomainC: EnsDomainDetailed = {
   id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ad',
-  tokenId: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a8',
+  token_id: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a8',
   name: 'duck.duck.eth',
   registrant: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  resolvedAddress: {
+  resolved_address: {
     hash: '0xfe6ab8a0dafe7d41adf247c210451c264155c9b0',
   },
   owner: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  registrationDate: '2022-04-24T07:34:44.000Z',
-  expiryDate: '2022-11-01T13:10:36.000Z',
-  otherAddresses: {},
+  registration_date: '2022-04-24T07:34:44.000Z',
+  expiry_date: '2022-11-01T13:10:36.000Z',
+  other_addresses: {},
 };
 
 export const ensDomainD: EnsDomainDetailed = {
   id: '0xdb7f351de6d93bda077a9211bdc49f249326d87932e4787d109b0262e9d189ae',
-  tokenId: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a9',
+  token_id: '0xf9b76a83152e20da7e5e671de7d79c7de1a2e63add2796aa187bbf98dd2471a9',
   name: '🦆.duck.eth',
   registrant: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
-  resolvedAddress: {
+  resolved_address: {
     hash: '0x114d4603199df73e7d157787f8778e21fcd13066',
   },
   owner: null,
-  registrationDate: '2022-04-24T07:34:44.000Z',
-  expiryDate: '2027-09-23T13:10:36.000Z',
-  otherAddresses: {},
+  registration_date: '2022-04-24T07:34:44.000Z',
+  expiry_date: '2027-09-23T13:10:36.000Z',
+  other_addresses: {},
 };

mocks/ens/events.ts

 import type { EnsDomainEvent } from 'types/api/ens';
 
 export const ensDomainEventA: EnsDomainEvent = {
-  transactionHash: '0x86c66b9fad66e4f20d42a6eed4fe12a0f48a274786fd85e9d4aa6c60e84b5874',
+  transaction_hash: '0x86c66b9fad66e4f20d42a6eed4fe12a0f48a274786fd85e9d4aa6c60e84b5874',
   timestamp: '2021-06-27T13:34:44.000000Z',
-  fromAddress: {
+  from_address: {
     hash: '0xaa96a50a2f67111262fe24576bd85bb56ec65016',
   },
   action: '0xf7a16963',
 };
 
 export const ensDomainEventB = {
-  transactionHash: '0x150bf7d5cd42457dd9c799ddd9d4bf6c30c703e1954a88c6d4b668b23fe0fbf8',
+  transaction_hash: '0x150bf7d5cd42457dd9c799ddd9d4bf6c30c703e1954a88c6d4b668b23fe0fbf8',
   timestamp: '2022-11-02T14:20:24.000000Z',
-  fromAddress: {
+  from_address: {
     hash: '0xfe6ab8a0dafe7d41adf247c210451c264155c9b0',
   },
   action: 'register',

stubs/ENS.ts

-import type { EnsDomainDetailed } from 'types/api/ens';
+import type { EnsDomainDetailed, EnsDomainEvent } from 'types/api/ens';
 
 import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
 import { TX_HASH } from './tx';
@@ -6,20 +6,20 @@ import { TX_HASH } from './tx';
 export const ENS_DOMAIN: EnsDomainDetailed = {
   id: '0x126d74db13895f8d3a1d362410212731d1e1d9be8add83e388385f93d84c8c84',
   name: 'kitty.cat.eth',
-  tokenId: '0x686f4041f059de13c12563c94bd32b8edef9e4d86c931f37abb8cb69ecf25fd6',
+  token_id: '0x686f4041f059de13c12563c94bd32b8edef9e4d86c931f37abb8cb69ecf25fd6',
   owner: ADDRESS_PARAMS,
-  resolvedAddress: ADDRESS_PARAMS,
+  resolved_address: ADDRESS_PARAMS,
   registrant: ADDRESS_PARAMS,
-  registrationDate: '2023-12-20T01:29:12.000Z',
-  expiryDate: '2099-01-02T01:29:12.000Z',
-  otherAddresses: {
+  registration_date: '2023-12-20T01:29:12.000Z',
+  expiry_date: '2099-01-02T01:29:12.000Z',
+  other_addresses: {
     ETH: ADDRESS_HASH,
   },
 };
 
-export const ENS_DOMAIN_EVENT = {
-  transactionHash: TX_HASH,
+export const ENS_DOMAIN_EVENT: EnsDomainEvent = {
+  transaction_hash: TX_HASH,
   timestamp: '2022-06-06T08:43:15.000000Z',
-  fromAddress: ADDRESS_PARAMS,
+  from_address: ADDRESS_PARAMS,
   action: '0xf7a16963',
 };

types/api/ens.ts

 export interface EnsDomain {
   id: string;
   name: string;
-  resolvedAddress: {
+  resolved_address: {
     hash: string;
   } | null;
   owner: {
     hash: string;
   } | null;
-  registrationDate?: string;
-  expiryDate: string | null;
+  registration_date?: string;
+  expiry_date: string | null;
 }
 
 export interface EnsDomainDetailed extends EnsDomain {
-  tokenId: string;
+  token_id: string;
   registrant: {
     hash: string;
   } | null;
-  otherAddresses: Record<string, string>;
+  other_addresses: Record<string, string>;
 }
 
 export interface EnsDomainEvent {
-  transactionHash: string;
+  transaction_hash: string;
   timestamp: string;
-  fromAddress: {
+  from_address: {
     hash: string;
   } | null;
   action?: string;
@@ -30,24 +30,39 @@ export interface EnsDomainEvent {
 
 export interface EnsAddressLookupResponse {
   items: Array<EnsDomain>;
-  totalRecords: number;
+  next_page_params: {
+    page_token: string;
+    page_size: number;
+  } | null;
 }
 
 export interface EnsDomainEventsResponse {
   items: Array<EnsDomainEvent>;
-  totalRecords: number;
 }
 
 export interface EnsDomainLookupResponse {
   items: Array<EnsDomain>;
-  totalRecords: number;
+  next_page_params: {
+    page_token: string;
+    page_size: number;
+  } | null;
+}
+
+export interface EnsAddressLookupFilters {
+  address: string | null;
+  resolved_to: boolean;
+  owned_by: boolean;
+  only_active: boolean;
 }
 
 export interface EnsDomainLookupFilters {
   name: string | null;
-  resolvedTo: boolean;
-  ownedBy: boolean;
-  onlyActive: boolean;
+  only_active: boolean;
+}
+
+export interface EnsLookupSorting {
+  sort: 'registration_date';
+  order: 'ASC' | 'DESC';
 }
 
-export type EnsDomainLookupFiltersOptions = Array<'resolvedTo' | 'ownedBy' | 'withInactive'>;
+export type EnsDomainLookupFiltersOptions = Array<'resolved_to' | 'owned_by' | 'with_inactive'>;

ui/address/ensDomains/AddressEnsDomains.tsx

-import { Button, chakra, Flex, Grid, Icon, Popover, PopoverBody, PopoverContent, PopoverTrigger, Skeleton, useDisclosure } from '@chakra-ui/react';
+import { Button, chakra, Flex, Grid, Popover, PopoverBody, PopoverContent, PopoverTrigger, Skeleton, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import arrowIcon from 'icons/arrows/east-mini.svg';
-import ensIcon from 'icons/ENS_slim.svg';
 import useApiQuery from 'lib/api/useApiQuery';
 import dayjs from 'lib/date/dayjs';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
+import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/LinkInternal';
 
 interface Props {
@@ -21,14 +20,12 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
 
   const { data, isPending, isError } = useApiQuery('addresses_lookup', {
     pathParams: { chainId: config.chain.id },
-    fetchParams: {
-      method: 'POST',
-      body: {
-        address: addressHash,
-        resolvedTo: true,
-        ownedBy: true,
-        onlyActive: true,
-      },
+    queryParams: {
+      address: addressHash,
+      resolved_to: true,
+      owned_by: true,
+      only_active: true,
+      order: 'ASC',
     },
   });
 
@@ -47,11 +44,13 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
     domain.name !== mainDomainName,
   );
   const resolvedDomains = data.items.filter((domain) =>
-    domain.resolvedAddress &&
-    domain.resolvedAddress.hash.toLowerCase() === addressHash.toLowerCase() &&
+    domain.resolved_address &&
+    domain.resolved_address.hash.toLowerCase() === addressHash.toLowerCase() &&
     domain.name !== mainDomainName,
   );
 
+  const totalRecords = data.next_page_params ? '50+' : data.items.length;
+
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
@@ -66,9 +65,9 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
           h="32px"
           flexShrink={ 0 }
         >
-          <Icon as={ ensIcon } boxSize={ 5 }/>
-          <chakra.span ml={ 1 } display={{ base: 'none', lg: 'block' }}>{ data.totalRecords } Domains</chakra.span>
-          <Icon as={ arrowIcon } transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 }/>
+          <IconSvg name="ENS_slim" boxSize={ 5 }/>
+          <chakra.span ml={ 1 } display={{ base: 'none', lg: 'block' }}>{ totalRecords } Domains</chakra.span>
+          <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 }/>
         </Button>
       </PopoverTrigger>
       <PopoverContent w={{ base: '100vw', lg: '500px' }}>
@@ -78,8 +77,8 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
               <p>A domain name is not necessarily held by a person popularly associated with the name.</p>
               <Flex alignItems="center" fontSize="md" mt={ 4 }>
                 <EnsEntity name={ mainDomain.name } fontWeight={ 600 } noCopy/>
-                { mainDomain.expiryDate &&
-                    <chakra.span color="text_secondary" whiteSpace="pre"> (expires { dayjs(mainDomain.expiryDate).fromNow() })</chakra.span> }
+                { mainDomain.expiry_date &&
+                    <chakra.span color="text_secondary" whiteSpace="pre"> (expires { dayjs(mainDomain.expiry_date).fromNow() })</chakra.span> }
               </Flex>
             </div>
           ) }
@@ -101,10 +100,10 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
           ) }
           { (ownedDomains.length > 9 || resolvedDomains.length > 9) && (
             <LinkInternal
-              href={ route({ pathname: '/name-domains', query: { ownedBy: 'true', resolvedTo: 'true', q: addressHash } }) }
+              href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', q: addressHash } }) }
             >
               <span> More results</span>
-              <chakra.span color="text_secondary"> ({ data.totalRecords })</chakra.span>
+              <chakra.span color="text_secondary"> ({ totalRecords })</chakra.span>
             </LinkInternal>
           ) }
         </PopoverBody>

ui/nameDomain/NameDomainDetails.tsx

@@ -23,12 +23,12 @@ interface Props {
 const NameDomainDetails = ({ query }: Props) => {
   const isLoading = query.isPlaceholderData;
 
-  const otherAddresses = Object.entries(query.data?.otherAddresses ?? {});
-  const hasExpired = query.data?.expiryDate && dayjs(query.data.expiryDate).isBefore(dayjs());
+  const otherAddresses = Object.entries(query.data?.other_addresses ?? {});
+  const hasExpired = query.data?.expiry_date && dayjs(query.data.expiry_date).isBefore(dayjs());
 
   return (
     <Grid columnGap={ 8 } rowGap={ 3 } templateColumns={{ base: 'minmax(0, 1fr)', lg: 'max-content minmax(728px, auto)' }}>
-      { query.data?.expiryDate && (
+      { query.data?.expiry_date && (
         <DetailsInfoItem
           title="Expiration date"
           // eslint-disable-next-line max-len
@@ -42,17 +42,17 @@ const NameDomainDetails = ({ query }: Props) => {
           { hasExpired && (
             <>
               <Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="24px">
-                { dayjs(query.data.expiryDate).fromNow() }
+                { dayjs(query.data.expiry_date).fromNow() }
               </Skeleton>
               <TextSeparator color="gray.500"/>
             </>
           ) }
           <Skeleton isLoaded={ !isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="24px">
-            { dayjs(query.data.expiryDate).format('llll') }
+            { dayjs(query.data.expiry_date).format('llll') }
           </Skeleton>
           <TextSeparator color="gray.500"/>
           <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline">
-            <NameDomainExpiryStatus date={ query.data?.expiryDate }/>
+            <NameDomainExpiryStatus date={ query.data?.expiry_date }/>
           </Skeleton>
         </DetailsInfoItem>
       ) }
@@ -72,7 +72,7 @@ const NameDomainDetails = ({ query }: Props) => {
             <LinkInternal
               flexShrink={ 0 }
               display="inline-flex"
-              href={ route({ pathname: '/name-domains', query: { ownedBy: 'true', resolvedTo: 'true', q: query.data.registrant.hash } }) }
+              href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', q: query.data.registrant.hash } }) }
             >
               <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
             </LinkInternal>
@@ -95,7 +95,7 @@ const NameDomainDetails = ({ query }: Props) => {
             <LinkInternal
               flexShrink={ 0 }
               display="inline-flex"
-              href={ route({ pathname: '/name-domains', query: { ownedBy: 'true', resolvedTo: 'true', q: query.data.owner.hash } }) }
+              href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', q: query.data.owner.hash } }) }
             >
               <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
             </LinkInternal>
@@ -110,7 +110,7 @@ const NameDomainDetails = ({ query }: Props) => {
         whiteSpace="pre-wrap"
       >
         <Skeleton isLoaded={ !isLoading }>
-          { query.data?.tokenId }
+          { query.data?.token_id }
         </Skeleton>
       </DetailsInfoItem>
       { otherAddresses.length > 0 && (

ui/nameDomain/NameDomainHistory.tsx

@@ -6,7 +6,6 @@ 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 { generateListStub } from 'stubs/utils';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 
 import NameDomainHistoryListItem from './history/NameDomainHistoryListItem';
@@ -22,7 +21,7 @@ const NameDomainHistory = () => {
   const { isPlaceholderData, isError, data } = useApiQuery('domain_events', {
     pathParams: { name: domainName, chainId: config.chain.id },
     queryOptions: {
-      placeholderData: generateListStub<'domain_events'>(ENS_DOMAIN_EVENT, 4, { totalRecords: 4 }),
+      placeholderData: { items: Array(4).fill(ENS_DOMAIN_EVENT) },
     },
   });
 

ui/nameDomain/history/NameDomainHistoryListItem.tsx

@@ -13,7 +13,7 @@ type Props = EnsDomainEvent & {
   isLoading?: boolean;
 }
 
-const NameDomainHistoryListItem = ({ isLoading, transactionHash, timestamp, fromAddress, action }: Props) => {
+const NameDomainHistoryListItem = ({ isLoading, transaction_hash: transactionHash, timestamp, from_address: fromAddress, action }: Props) => {
   return (
     <ListItemMobileGrid.Container>
       <ListItemMobileGrid.Label isLoading={ isLoading }>Txn hash</ListItemMobileGrid.Label>

ui/nameDomain/history/NameDomainHistoryTableItem.tsx

@@ -12,7 +12,7 @@ type Props = EnsDomainEvent & {
   isLoading?: boolean;
 }
 
-const NameDomainHistoryTableItem = ({ isLoading, transactionHash, fromAddress, action, timestamp }: Props) => {
+const NameDomainHistoryTableItem = ({ isLoading, transaction_hash: transactionHash, from_address: fromAddress, action, timestamp }: Props) => {
 
   return (
     <Tr>

ui/nameDomains/NameDomainsActionBar.tsx

@@ -57,11 +57,11 @@ const NameDomainsActionBar = ({ searchTerm, onSearchChange, filterValue, onFilte
       <div>
         <CheckboxGroup size="lg" onChange={ onFilterValueChange } value={ filterValue } defaultValue={ filterValue }>
           <Text variant="secondary" fontWeight={ 600 } mb={ 3 } fontSize="sm">Address</Text>
-          <Checkbox value="ownedBy" display="block" isDisabled={ !isAddressSearch }>
+          <Checkbox value="owned_by" display="block" isDisabled={ !isAddressSearch }>
             Owned by
           </Checkbox>
           <Checkbox
-            value="resolvedTo"
+            value="resolved_to"
             display="block"
             mt={ 5 }
             mb={ 4 }
@@ -73,7 +73,7 @@ const NameDomainsActionBar = ({ searchTerm, onSearchChange, filterValue, onFilte
             Resolved to address
           </Checkbox>
           <Text variant="secondary" fontWeight={ 600 } mb={ 3 } fontSize="sm">Status</Text>
-          <Checkbox value="withInactive" display="block">
+          <Checkbox value="with_inactive" display="block">
             Include expired
           </Checkbox>
         </CheckboxGroup>

ui/nameDomains/NameDomainsListItem.tsx

@@ -13,7 +13,7 @@ interface Props extends EnsDomain {
   isLoading: boolean;
 }
 
-const NameDomainsListItem = ({ name, isLoading, resolvedAddress, registrationDate, expiryDate }: Props) => {
+const NameDomainsListItem = ({ name, isLoading, resolved_address: resolvedAddress, registration_date: registrationDate, expiry_date: expiryDate }: Props) => {
   return (
     <ListItemMobileGrid.Container>
       <ListItemMobileGrid.Label isLoading={ isLoading }>Domain</ListItemMobileGrid.Label>

ui/nameDomains/NameDomainsTableItem.tsx

@@ -12,7 +12,7 @@ type Props = EnsDomain & {
   isLoading?: boolean;
 }
 
-const NameDomainsTableItem = ({ isLoading, name, resolvedAddress, registrationDate, expiryDate }: Props) => {
+const NameDomainsTableItem = ({ isLoading, name, resolved_address: resolvedAddress, registration_date: registrationDate, expiry_date: expiryDate }: Props) => {
 
   return (
     <Tr>

ui/nameDomains/utils.ts

+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 = 'registration_date';
-export type Sort = `${ SortField }-asc` | `${ SortField }-desc`;
+export type SortField = EnsLookupSorting['sort'];
+export type Sort = `${ EnsLookupSorting['sort'] }-${ EnsLookupSorting['order'] }`;
 
 export const SORT_OPTIONS: Array<Option<Sort>> = [
   { title: 'Default', id: undefined },
-  { title: 'Registered on descending', id: 'registration_date-desc' },
-  { title: 'Registered on ascending', id: 'registration_date-asc' },
+  { title: 'Registered on descending', id: 'registration_date-DESC' },
+  { title: 'Registered on ascending', id: 'registration_date-ASC' },
 ];
 
 const SORT_SEQUENCE: Record<SortField, Array<Sort | undefined>> = {
-  registration_date: [ 'registration_date-desc', 'registration_date-asc', undefined ],
+  registration_date: [ 'registration_date-DESC', 'registration_date-ASC', undefined ],
 };
 
 export const getNextSortValue = (getNextSortValueShared<SortField, Sort>).bind(undefined, SORT_SEQUENCE);

ui/pages/NameDomain.tsx

@@ -56,21 +56,21 @@ const NameDomain = () => {
         noLink
         maxW="300px"
       />
-      { infoQuery.data?.resolvedAddress && (
+      { infoQuery.data?.resolved_address && (
         <AddressEntity
-          address={ infoQuery.data?.resolvedAddress }
+          address={ infoQuery.data?.resolved_address }
           isLoading={ isLoading }
           truncation={ isMobile ? 'constant' : 'dynamic' }
           noLink
           flexShrink={ 0 }
         />
       ) }
-      { infoQuery.data?.resolvedAddress && (
+      { infoQuery.data?.resolved_address && (
         <Tooltip label="Lookup for related domain names">
           <LinkInternal
             flexShrink={ 0 }
             display="inline-flex"
-            href={ route({ pathname: '/name-domains', query: { ownedBy: 'true', resolvedTo: 'true', q: infoQuery.data?.resolvedAddress?.hash } }) }
+            href={ route({ pathname: '/name-domains', query: { owned_by: 'true', resolved_to: 'true', q: infoQuery.data?.resolved_address?.hash } }) }
           >
             <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
           </LinkInternal>

ui/pages/NameDomains.tsx

@@ -24,14 +24,14 @@ const NameDomains = () => {
   const router = useRouter();
 
   const q = getQueryParamString(router.query.q);
-  const ownedBy = getQueryParamString(router.query.ownedBy);
-  const resolvedTo = getQueryParamString(router.query.resolvedTo);
-  const withInactive = getQueryParamString(router.query.withInactive);
+  const ownedBy = getQueryParamString(router.query.owned_by);
+  const resolvedTo = getQueryParamString(router.query.resolved_to);
+  const withInactive = getQueryParamString(router.query.with_inactive);
 
   const initialFilters: EnsDomainLookupFiltersOptions = [
-    ownedBy === 'true' ? 'ownedBy' as const : undefined,
-    resolvedTo === 'true' ? 'resolvedTo' as const : undefined,
-    withInactive === 'true' ? 'withInactive' as const : undefined,
+    ownedBy === 'true' ? 'owned_by' as const : undefined,
+    resolvedTo === 'true' ? 'resolved_to' as const : undefined,
+    withInactive === 'true' ? 'with_inactive' as const : undefined,
   ].filter(Boolean);
 
   const [ searchTerm, setSearchTerm ] = React.useState<string>(q || '');
@@ -41,41 +41,35 @@ const NameDomains = () => {
   const debouncedSearchTerm = useDebounce(searchTerm, 300);
   const isAddressSearch = React.useMemo(() => ADDRESS_REGEXP.test(debouncedSearchTerm), [ debouncedSearchTerm ]);
   const sortParam = sort?.split('-')[0];
-  const orderParam = sort?.split('-')[1].toUpperCase();
+  const orderParam = sort?.split('-')[1];
 
   const addressesLookupQuery = useApiQuery('addresses_lookup', {
     pathParams: { chainId: config.chain.id },
-    fetchParams: {
-      method: 'POST',
-      body: {
-        address: debouncedSearchTerm,
-        resolvedTo: filterValue.includes('resolvedTo'),
-        ownedBy: filterValue.includes('ownedBy'),
-        onlyActive: !filterValue.includes('withInactive'),
-        sort: sortParam,
-        order: orderParam,
-      },
+    queryParams: {
+      address: debouncedSearchTerm,
+      resolved_to: filterValue.includes('resolved_to'),
+      owned_by: filterValue.includes('owned_by'),
+      only_active: !filterValue.includes('with_inactive'),
+      sort: sortParam,
+      order: orderParam,
     },
     queryOptions: {
       enabled: isAddressSearch,
-      placeholderData: generateListStub<'addresses_lookup'>(ENS_DOMAIN, 50, { totalRecords: 50 }),
+      placeholderData: generateListStub<'addresses_lookup'>(ENS_DOMAIN, 50, { next_page_params: null }),
     },
   });
 
   const domainsLookupQuery = useApiQuery('domains_lookup', {
     pathParams: { chainId: config.chain.id },
-    fetchParams: {
-      method: 'POST',
-      body: {
-        name: debouncedSearchTerm,
-        onlyActive: !filterValue.includes('withInactive'),
-        sort: sortParam,
-        order: orderParam,
-      },
+    queryParams: {
+      name: debouncedSearchTerm,
+      only_active: !filterValue.includes('with_inactive'),
+      sort: sortParam,
+      order: orderParam,
     },
     queryOptions: {
       enabled: !isAddressSearch,
-      placeholderData: generateListStub<'domains_lookup'>(ENS_DOMAIN, 50, { totalRecords: 50 }),
+      placeholderData: generateListStub<'domains_lookup'>(ENS_DOMAIN, 50, { next_page_params: null }),
     },
   });
 
@@ -83,8 +77,8 @@ const NameDomains = () => {
   const { data, isError, isPlaceholderData: isLoading } = query;
 
   React.useEffect(() => {
-    if (isAddressSearch && filterValue.filter((value) => value !== 'withInactive').length === 0) {
-      setFilterValue([ 'ownedBy', 'resolvedTo' ]);
+    if (isAddressSearch && filterValue.filter((value) => value !== 'with_inactive').length === 0) {
+      setFilterValue([ 'owned_by', 'resolved_to' ]);
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ isAddressSearch ]);