Resolve BENS names from URL directly to address page (#2004)

* Resolve BENS names from URL directly to address page Fixes #1965 * fix tests
blockscout · Jun 13, 2024 · aeb16bf · aeb16bf
1 parent d392e5c
commit aeb16bf
Show file tree

Hide file tree

Showing 16 changed files with 112 additions and 36 deletions.
diff --git a/lib/address/useAddressMetadataInfoQuery.ts b/lib/address/useAddressMetadataInfoQuery.ts
@@ -5,7 +5,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 
 import parseMetaPayload from './parseMetaPayload';
 
-export default function useAddressMetadataInfoQuery(addresses: Array<string>) {
+export default function useAddressMetadataInfoQuery(addresses: Array<string>, isEnabled = true) {
 
   const resource = 'address_metadata_info';
 
@@ -16,7 +16,7 @@ export default function useAddressMetadataInfoQuery(addresses: Array<string>) {
       tagsLimit: '20',
     },
     queryOptions: {
-      enabled: addresses.length > 0 && config.features.addressMetadata.isEnabled,
+      enabled: isEnabled && addresses.length > 0 && config.features.addressMetadata.isEnabled,
       select: (data) => {
         const addresses = Object.entries(data.addresses)
           .map(([ address, { tags, reputation } ]) => {

diff --git a/playwright/mocks/lib/growthbook/useFeatureValue.js b/playwright/mocks/lib/growthbook/useFeatureValue.js
@@ -1,6 +1,9 @@
 const useFeatureValue = (name, fallback) => {
   try {
     const value = JSON.parse(localStorage.getItem(`pw_feature:${ name }`));
+    if (value === null) {
+      throw new Error();
+    }
     return { isLoading: false, value };
   } catch (error) {
     return { isLoading: false, value: fallback };

diff --git a/ui/address/AddressAccountHistory.tsx b/ui/address/AddressAccountHistory.tsx
@@ -27,9 +27,10 @@ const getFilterValue = (getFilterValueFromQuery<NovesHistoryFilterValue>).bind(n
 type Props = {
   scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
+  isQueryEnabled?: boolean;
 }
 
-const AddressAccountHistory = ({ scrollRef, shouldRender = true }: Props) => {
+const AddressAccountHistory = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const isMounted = useIsMounted();
 
@@ -42,6 +43,7 @@ const AddressAccountHistory = ({ scrollRef, shouldRender = true }: Props) => {
     pathParams: { address: currentAddress },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'noves_address_history'>(NOVES_TRANSLATE, 10, { hasNextPage: false, pageNumber: 1, pageSize: 10 }),
     },
   });

diff --git a/ui/address/AddressBlocksValidated.tsx b/ui/address/AddressBlocksValidated.tsx
@@ -27,9 +27,10 @@ import AddressBlocksValidatedTableItem from './blocksValidated/AddressBlocksVali
 interface Props {
   scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
+  isQueryEnabled?: boolean;
 }
 
-const AddressBlocksValidated = ({ scrollRef, shouldRender = true }: Props) => {
+const AddressBlocksValidated = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const [ socketAlert, setSocketAlert ] = React.useState(false);
   const queryClient = useQueryClient();
   const router = useRouter();
@@ -41,6 +42,7 @@ const AddressBlocksValidated = ({ scrollRef, shouldRender = true }: Props) => {
     pathParams: { hash: addressHash },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_blocks_validated'>(
         BLOCK,
         50,

diff --git a/ui/address/AddressCoinBalance.tsx b/ui/address/AddressCoinBalance.tsx
@@ -20,9 +20,10 @@ import AddressCoinBalanceHistory from './coinBalance/AddressCoinBalanceHistory';
 
 type Props = {
   shouldRender?: boolean;
+  isQueryEnabled?: boolean;
 }
 
-const AddressCoinBalance = ({ shouldRender = true }: Props) => {
+const AddressCoinBalance = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
   const [ socketAlert, setSocketAlert ] = React.useState(false);
   const queryClient = useQueryClient();
   const router = useRouter();
@@ -36,6 +37,7 @@ const AddressCoinBalance = ({ shouldRender = true }: Props) => {
     pathParams: { hash: addressHash },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_coin_balance'>(
         ADDRESS_COIN_BALANCE,
         50,

diff --git a/ui/address/AddressInternalTxs.tsx b/ui/address/AddressInternalTxs.tsx
@@ -26,8 +26,9 @@ const getFilterValue = (getFilterValueFromQuery<AddressFromToFilter>).bind(null,
 type Props = {
   scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
+  isQueryEnabled?: boolean;
 }
-const AddressInternalTxs = ({ scrollRef, shouldRender = true }: Props) => {
+const AddressInternalTxs = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const isMounted = useIsMounted();
 
@@ -41,6 +42,7 @@ const AddressInternalTxs = ({ scrollRef, shouldRender = true }: Props) => {
     filters: { filter: filterValue },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_internal_txs'>(
         INTERNAL_TX,
         50,

diff --git a/ui/address/AddressLogs.tsx b/ui/address/AddressLogs.tsx
@@ -16,9 +16,10 @@ import AddressCsvExportLink from './AddressCsvExportLink';
 type Props ={
   scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
+  isQueryEnabled?: boolean;
 }
 
-const AddressLogs = ({ scrollRef, shouldRender = true }: Props) => {
+const AddressLogs = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const isMounted = useIsMounted();
 
@@ -28,6 +29,7 @@ const AddressLogs = ({ scrollRef, shouldRender = true }: Props) => {
     pathParams: { hash },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_logs'>(LOG, 3, { next_page_params: {
         block_number: 9005750,
         index: 42,

diff --git a/ui/address/AddressTokenTransfers.tsx b/ui/address/AddressTokenTransfers.tsx
@@ -65,11 +65,12 @@ const matchFilters = (filters: Filters, tokenTransfer: TokenTransfer, address?:
 type Props = {
   scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
+  isQueryEnabled?: boolean;
   // for tests only
   overloadCount?: number;
 }
 
-const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender = true }: Props) => {
+const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const queryClient = useQueryClient();
   const isMobile = useIsMobile();
@@ -95,6 +96,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shou
     filters: tokenFilter ? { token: tokenFilter } : filters,
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: getTokenTransfersStub(undefined, {
         block_number: 7793535,
         index: 46,

diff --git a/ui/address/AddressTokens.tsx b/ui/address/AddressTokens.tsx
@@ -45,9 +45,10 @@ const getTokenFilterValue = (getFilterValuesFromQuery<NFTTokenType>).bind(null,
 
 type Props = {
   shouldRender?: boolean;
+  isQueryEnabled?: boolean;
 }
 
-const AddressTokens = ({ shouldRender = true }: Props) => {
+const AddressTokens = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const isMobile = useIsMobile();
   const isMounted = useIsMounted();
@@ -67,7 +68,7 @@ const AddressTokens = ({ shouldRender = true }: Props) => {
     filters: { type: 'ERC-20' },
     scrollRef,
     options: {
-      enabled: !tab || tab === 'tokens_erc20',
+      enabled: isQueryEnabled && (!tab || tab === 'tokens_erc20'),
       refetchOnMount: false,
       placeholderData: generateListStub<'address_tokens'>(ADDRESS_TOKEN_BALANCE_ERC_20, 10, { next_page_params: null }),
     },
@@ -78,7 +79,7 @@ const AddressTokens = ({ shouldRender = true }: Props) => {
     pathParams: { hash },
     scrollRef,
     options: {
-      enabled: tab === 'tokens_nfts' && nftDisplayType === 'collection',
+      enabled: isQueryEnabled && tab === 'tokens_nfts' && nftDisplayType === 'collection',
       placeholderData: generateListStub<'address_collections'>(ADDRESS_COLLECTION, 10, { next_page_params: null }),
     },
     filters: { type: tokenTypes },
@@ -89,7 +90,7 @@ const AddressTokens = ({ shouldRender = true }: Props) => {
     pathParams: { hash },
     scrollRef,
     options: {
-      enabled: tab === 'tokens_nfts' && nftDisplayType === 'list',
+      enabled: isQueryEnabled && tab === 'tokens_nfts' && nftDisplayType === 'list',
       placeholderData: generateListStub<'address_nfts'>(ADDRESS_NFT_1155, 10, { next_page_params: null }),
     },
     filters: { type: tokenTypes },

diff --git a/ui/address/AddressTxs.tsx b/ui/address/AddressTxs.tsx
@@ -49,11 +49,12 @@ const matchFilter = (filterValue: AddressFromToFilter, transaction: Transaction,
 type Props = {
   scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
+  isQueryEnabled?: boolean;
   // for tests only
   overloadCount?: number;
 }
 
-const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender = true }: Props) => {
+const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const queryClient = useQueryClient();
   const isMounted = useIsMounted();
@@ -74,6 +75,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT, shouldRender =
     sorting: getSortParamsFromValue<TransactionsSortingValue, TransactionsSortingField, TransactionsSorting['order']>(sort),
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_txs'>(TX, 50, { next_page_params: {
         block_number: 9005713,
         index: 5,

diff --git a/ui/address/AddressUserOps.tsx b/ui/address/AddressUserOps.tsx
@@ -11,9 +11,10 @@ import UserOpsContent from 'ui/userOps/UserOpsContent';
 type Props = {
   scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
+  isQueryEnabled?: boolean;
 }
 
-const AddressUserOps = ({ scrollRef, shouldRender = true }: Props) => {
+const AddressUserOps = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const isMounted = useIsMounted();
 
@@ -23,7 +24,7 @@ const AddressUserOps = ({ scrollRef, shouldRender = true }: Props) => {
     resourceName: 'user_ops',
     scrollRef,
     options: {
-      enabled: Boolean(hash),
+      enabled: isQueryEnabled && Boolean(hash),
       placeholderData: generateListStub<'user_ops'>(USER_OPS_ITEM, 50, { next_page_params: {
         page_token: '10355938,0x5956a847d8089e254e02e5111cad6992b99ceb9e5c2dc4343fd53002834c4dc6',
         page_size: 50,

diff --git a/ui/address/AddressWithdrawals.tsx b/ui/address/AddressWithdrawals.tsx
@@ -16,8 +16,9 @@ import BeaconChainWithdrawalsTable from 'ui/withdrawals/beaconChain/BeaconChainW
 type Props = {
   scrollRef?: React.RefObject<HTMLDivElement>;
   shouldRender?: boolean;
+  isQueryEnabled?: boolean;
 }
-const AddressWithdrawals = ({ scrollRef, shouldRender = true }: Props) => {
+const AddressWithdrawals = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
   const router = useRouter();
   const isMounted = useIsMounted();
 
@@ -28,6 +29,7 @@ const AddressWithdrawals = ({ scrollRef, shouldRender = true }: Props) => {
     pathParams: { hash },
     scrollRef,
     options: {
+      enabled: isQueryEnabled,
       placeholderData: generateListStub<'address_withdrawals'>(WITHDRAWAL, 50, { next_page_params: {
         index: 5,
         items_count: 50,

diff --git a/ui/address/utils/useAddressQuery.ts b/ui/address/utils/useAddressQuery.ts
@@ -22,15 +22,16 @@ export type AddressQuery = UseQueryResult<Address, ResourceError<{ status: numbe
 
 interface Params {
   hash: string;
+  isEnabled?: boolean;
 }
 
-export default function useAddressQuery({ hash }: Params): AddressQuery {
+export default function useAddressQuery({ hash, isEnabled = true }: Params): AddressQuery {
   const [ isRefetchEnabled, setRefetchEnabled ] = React.useState(false);
 
   const apiQuery = useApiQuery<'address', { status: number }>('address', {
     pathParams: { hash },
     queryOptions: {
-      enabled: Boolean(hash),
+      enabled: isEnabled && Boolean(hash),
       placeholderData: ADDRESS_INFO,
       refetchOnMount: false,
       retry: (failureCount, error) => {

diff --git a/ui/address/utils/useCheckDomainNameParam.ts b/ui/address/utils/useCheckDomainNameParam.ts
@@ -0,0 +1,46 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import config from 'configs/app';
+import useApiQuery from 'lib/api/useApiQuery';
+
+const DOMAIN_NAME_REGEXP = /.\../;
+
+export default function useCheckDomainNameParam(hashOrDomainName: string) {
+  const router = useRouter();
+  const maybeDomainName = DOMAIN_NAME_REGEXP.test(hashOrDomainName);
+  const isQueryEnabled = config.features.nameService.isEnabled && maybeDomainName;
+  const [ isLoading, setIsLoading ] = React.useState(isQueryEnabled);
+
+  const domainLookupQuery = useApiQuery('domains_lookup', {
+    pathParams: { chainId: config.chain.id },
+    queryParams: {
+      name: hashOrDomainName,
+      only_active: false,
+    },
+    queryOptions: {
+      enabled: isQueryEnabled,
+    },
+  });
+
+  React.useEffect(() => {
+    if (domainLookupQuery.isPending) {
+      return;
+    }
+
+    const firstDomainAddress = domainLookupQuery.data?.items[0]?.resolved_address?.hash;
+    if (firstDomainAddress) {
+      router.replace({ pathname: '/address/[hash]', query: { hash: firstDomainAddress } });
+    } else {
+      setIsLoading(false);
+    }
+  }, [ domainLookupQuery.isPending, domainLookupQuery.data, router ]);
+
+  React.useEffect(() => {
+    if (!maybeDomainName) {
+      setIsLoading(false);
+    }
+  }, [ maybeDomainName ]);
+
+  return isLoading;
+}