Skip to content

F
frontend
Commit 89dcb1db authored by tom's avatar tom
Browse files
Options

migration to new API resources schema

parent ed00ebe2
Hide whitespace changes
Inline Side-by-side
Showing with 150 additions and 127 deletions
lib/api/buildUrl.ts
View file @ 89dcb1db
......@@ -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
View file @ 89dcb1db
......@@ -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
View file @ 89dcb1db
......@@ -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
View file @ 89dcb1db
......@@ -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
View file @ 89dcb1db
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
View file @ 89dcb1db
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
View file @ 89dcb1db
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
View file @ 89dcb1db
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
View file @ 89dcb1db
......@@ -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
View file @ 89dcb1db
......@@ -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
View file @ 89dcb1db
......@@ -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
View file @ 89dcb1db
......@@ -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
View file @ 89dcb1db
......@@ -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
View file @ 89dcb1db
......@@ -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
View file @ 89dcb1db
......@@ -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
View file @ 89dcb1db
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
View file @ 89dcb1db
......@@ -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
View file @ 89dcb1db
......@@ -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 ]);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment