fix(unlock-app): Cleanup useEns hook usage (#15543)

* remove hook * remove hook test * remove redundant applayout component * update name resolver hook * cleanup * improve name resolver hook * update WrappedAddress component * cleanup
unlock-protocol · Feb 18, 2025 · bdb2648 · bdb2648
1 parent 8336908
commit bdb2648
Show file tree

Hide file tree

Showing 18 changed files with 123 additions and 454 deletions.
diff --git a/unlock-app/src/__tests__/hooks/useEns.test.jsx b/unlock-app/src/__tests__/hooks/useEns.test.jsx
diff --git a/unlock-app/src/components/content/event/Settings/Referrals.tsx b/unlock-app/src/components/content/event/Settings/Referrals.tsx
@@ -15,10 +15,10 @@ import { onResolveName } from '~/utils/resolvers'
 import { Controller, useForm } from 'react-hook-form'
 import { useReferrerFee } from '~/hooks/useReferrerFee'
 import { ToastHelper } from '~/components/helpers/toast.helper'
-import useEns from '~/hooks/useEns'
-import { addressMinify } from '~/utils/strings'
+
 import CopyUrlButton from '../CopyUrlButton'
 import { getEventUrl } from '../utils'
+import { WrappedAddress } from '~/components/interface/WrappedAddress'
 
 interface ReferralsProps {
   event: Event
@@ -42,11 +42,6 @@ export const Referral = ({
   onDelete: (referrer: string) => void
   referral: { referrer: string; fee: number }
 }) => {
-  const addressToEns = useEns(referrer)
-
-  const resolvedAddress =
-    addressToEns === referrer ? addressMinify(referrer) : addressToEns
-
   const eventUrlWithReferrer = new URL(eventUrl)
   eventUrlWithReferrer.searchParams.append('referrer', referrer)
 
@@ -56,7 +51,11 @@ export const Referral = ({
         {fee / 100}%
       </Detail>
       <Detail valueSize="medium" label="Address:">
-        {resolvedAddress}
+        <WrappedAddress
+          address={referrer}
+          showCopyIcon={false}
+          showExternalLink={false}
+        />
       </Detail>
       <div className="grow flex justify-end place-items-center	flex-row ">
         <CopyUrlButton url={eventUrlWithReferrer.toString()} />

diff --git a/unlock-app/src/components/creator/members/ExtendKeysDrawer.tsx b/unlock-app/src/components/creator/members/ExtendKeysDrawer.tsx
@@ -1,13 +1,12 @@
-import React from 'react'
 import { Button, Drawer, Input } from '@unlock-protocol/ui'
 import { useMutation } from '@tanstack/react-query'
-import { addressMinify } from '~/utils/strings'
 import { ToastHelper } from '~/components/helpers/toast.helper'
-import useEns from '~/hooks/useEns'
+
 import { useForm } from 'react-hook-form'
 import { MAX_UINT } from '~/constants'
 import dayjs from 'dayjs'
 import { useProvider } from '~/hooks/useProvider'
+import { WrappedAddress } from '~/components/interface/WrappedAddress'
 
 interface ExtendKeyDrawerProps {
   isOpen: boolean
@@ -206,7 +205,6 @@ export const ExtendKeysDrawer = ({
   resetSearchFilters,
 }: ExtendKeyDrawerProps) => {
   const owner = selectedKey?.owner
-  const addressToEns = useEns(owner!)
   const {
     lockAddress,
     tokenId,
@@ -238,8 +236,11 @@ export const ExtendKeysDrawer = ({
           <div className="flex gap-2">
             <span className="px-1 text-base font-semibold">Owner:</span>
             <span>
-              {/* ens will not be minified when resolved */}
-              {addressToEns === owner ? addressMinify(owner) : addressToEns}
+              <WrappedAddress
+                address={owner}
+                showCopyIcon={false}
+                showExternalLink={false}
+              />
             </span>
           </div>
         </div>

diff --git a/unlock-app/src/components/interface/WrappedAddress.tsx b/unlock-app/src/components/interface/WrappedAddress.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react'
 import { Address } from '@unlock-protocol/ui'
 import { ToastHelper } from '~/components/helpers/toast.helper'
-import { useNameResolver } from '~/hooks/useNameResolver'
 import networks from '@unlock-protocol/networks'
+import { resolveAddress } from '~/hooks/useNameResolver'
 
 /**
  * @typedef {Object} WrappedAddressProps
@@ -58,6 +58,7 @@ export const WrappedAddress: React.FC<WrappedAddressProps> = ({
   addressType = 'default',
   skipResolution = false,
   network,
+  showResolvedName = true,
   ...props
 }) => {
   // Normalize the address to always start with 0x
@@ -66,10 +67,15 @@ export const WrappedAddress: React.FC<WrappedAddressProps> = ({
   // If resolvedName is provided or skipResolution is true, we should skip the name resolution
   const shouldSkipResolution = Boolean(resolvedName || skipResolution)
 
-  // Fetch names for the address using the name resolver hook
-  const { ensName, baseName } = useNameResolver(
-    normalizedAddress,
-    shouldSkipResolution
+  /**
+   * Wrapper function for resolving names.
+   */
+  const resolveMultipleNames = useCallback(
+    async (address: string): Promise<string | undefined> => {
+      if (shouldSkipResolution) return undefined
+      return resolveAddress(address, preferredResolver)
+    },
+    [shouldSkipResolution, preferredResolver]
   )
 
   /**
@@ -100,54 +106,29 @@ export const WrappedAddress: React.FC<WrappedAddressProps> = ({
     ToastHelper.success(message)
   }, [addressType]) // include addressType to ensure the latest value is used
 
-  /**
-   * Resolves names based on the preferred resolver.
-   * @returns {string} The resolved name or the original address if not resolved.
-   */
-  const getResolvedName = useCallback((): string => {
-    if (resolvedName) return resolvedName
-    if (skipResolution) return address
-
-    if (preferredResolver === 'ens') {
-      return ensName || baseName || address
-    } else if (preferredResolver === 'base') {
-      return baseName || ensName || address
-    } else if (preferredResolver === 'multiple') {
-      // Prioritize ENS, then Base name, then fall back to address
-      return ensName || baseName || address
-    }
-    return address
-  }, [
-    preferredResolver,
-    ensName,
-    baseName,
-    address,
-    resolvedName,
-    skipResolution,
-  ])
-
   /**
    * Generates the explorer URL based on the provided network.
    * This function checks if the network is valid and retrieves the corresponding explorer URL for the normalized address.
-   * If the network is not provided or not found, it returns undefined.
    * @returns {string | undefined} The explorer URL for the address or undefined if no valid network is provided.
    */
   const getExplorerUrl = useCallback(() => {
     if (network && networks[network]) {
       const { explorer } = networks[network]
       return explorer?.urls?.address(normalizedAddress) || undefined
     }
-    // Return undefined if no network is provided or if it's not found
+    // Return undefined if no network is provided or if it's not found.
     return undefined
   }, [network, normalizedAddress])
 
   return (
     <Address
       address={address}
-      resolvedName={getResolvedName()}
+      resolvedName={resolvedName}
+      useName={resolvedName ? undefined : resolveMultipleNames}
       onCopied={handleCopy}
       showCopyIcon={showCopyIcon}
       showExternalLink={showExternalLink}
+      showResolvedName={showResolvedName}
       externalLinkUrl={getExplorerUrl()}
       {...props}
     />

diff --git a/unlock-app/src/components/interface/checkout/main/Metadata.tsx b/unlock-app/src/components/interface/checkout/main/Metadata.tsx
@@ -16,7 +16,6 @@ import {
 } from 'react'
 import { Button, Input, Placeholder } from '@unlock-protocol/ui'
 import { twMerge } from 'tailwind-merge'
-import { getAddressForName } from '~/hooks/useEns'
 import { formResultToMetadata } from '~/utils/userMetadata'
 import { ToastHelper } from '~/components/helpers/toast.helper'
 import { useSelector } from '@xstate/react'
@@ -36,6 +35,7 @@ import { useUpdateUsersMetadata } from '~/hooks/useUserMetadata'
 import Disconnect from './Disconnect'
 import { shouldSkip } from './utils'
 import { useAuthenticate } from '~/hooks/useAuthenticate'
+import { getAddressForName } from '~/hooks/useNameResolver'
 
 interface Props {
   checkoutService: CheckoutService