[TOOL-3009] Dashboard: Support all valid domains as ENS name and not just .eth

MananTank · MananTank · commit c58dcaa85519 · 2025-01-13T20:25:43.000+05:30
diff --git a/.changeset/happy-carrots-appear.md b/.changeset/happy-carrots-appear.md
@@ -0,0 +1,11 @@
+---
+"thirdweb": patch
+---
+
+Add `isValidENSName` utility function to `thirdweb` package for checking if a string is can be a valid ENS name - It does not check if the name is registered on the ENS registry, it only checks if the string is in a valid format for an ENS name.
+
+```ts
+isValidENSName("thirdweb.eth"); // true
+isValidENSName("foo.bar.com"); // true
+isValidENSName("foo"); // false
+```
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/published-by-ui.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/published-by-ui.tsx
@@ -6,9 +6,9 @@ import { getBytecode, getContract } from "thirdweb/contract";
 import { getPublishedUriFromCompilerUri } from "thirdweb/extensions/thirdweb";
 import { getInstalledModules } from "thirdweb/modules";
 import { download } from "thirdweb/storage";
-import { extractIPFSUri } from "thirdweb/utils";
+import { extractIPFSUri, isValidENSName } from "thirdweb/utils";
 import { fetchPublishedContractsFromDeploy } from "../../../../../../../components/contract-components/fetchPublishedContractsFromDeploy";
-import { isEnsName, resolveEns } from "../../../../../../../lib/ens";
+import { resolveEns } from "../../../../../../../lib/ens";
 
 type ModuleMetadataPickedKeys = {
   publisher: string;
@@ -52,7 +52,7 @@ export async function getPublishedByCardProps(params: {
 
   // get publisher address/ens
   let publisherAddressOrEns = publishedContractToShow.publisher;
-  if (!isEnsName(publishedContractToShow.publisher)) {
+  if (!isValidENSName(publishedContractToShow.publisher)) {
     try {
       const res = await resolveEns(publishedContractToShow.publisher);
       if (res.ensName) {
diff --git a/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/resolveAddressAndEns.tsx b/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/resolveAddressAndEns.tsx
@@ -1,6 +1,7 @@
 import { getAddress, isAddress } from "thirdweb";
+import { isValidENSName } from "thirdweb/utils";
 import { mapThirdwebPublisher } from "../../../../components/contract-components/fetch-contracts-with-versions";
-import { isEnsName, resolveEns } from "../../../../lib/ens";
+import { resolveEns } from "../../../../lib/ens";
 
 type ResolvedAddressInfo = {
   address: string;
@@ -17,7 +18,7 @@ export async function resolveAddressAndEns(
     };
   }
 
-  if (isEnsName(addressOrEns)) {
+  if (isValidENSName(addressOrEns)) {
     const mappedEns = mapThirdwebPublisher(addressOrEns);
     const res = await resolveEns(mappedEns).catch(() => null);
     if (res?.address) {
diff --git a/apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/page.tsx b/apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/page.tsx
@@ -85,7 +85,6 @@ export default async function PublishedContractPage(
         <SimpleGrid columns={12} gap={{ base: 6, md: 10 }} w="full">
           <PublishedContract
             publishedContract={publishedContract}
-            walletOrEns={params.publisher}
             twAccount={account}
           />
         </SimpleGrid>
diff --git a/apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/page.tsx b/apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/page.tsx
@@ -54,7 +54,6 @@ export default async function PublishedContractPage(
         <div className="grid w-full grid-cols-12 gap-6 md:gap-10">
           <PublishedContract
             publishedContract={publishedContract}
-            walletOrEns={params.publisher}
             twAccount={account}
           />
         </div>
diff --git a/apps/dashboard/src/components/contract-components/hooks.ts b/apps/dashboard/src/components/contract-components/hooks.ts
@@ -3,12 +3,12 @@
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { queryOptions, useQuery } from "@tanstack/react-query";
 import type { Abi } from "abitype";
-import { isEnsName, resolveEns } from "lib/ens";
+import { resolveEns } from "lib/ens";
 import { useV5DashboardChain } from "lib/v5-adapter";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import { getContract, resolveContractAbi } from "thirdweb/contract";
-import { isAddress } from "thirdweb/utils";
+import { isAddress, isValidENSName } from "thirdweb/utils";
 import {
   type PublishedContractWithVersion,
   fetchPublishedContractVersions,
@@ -130,7 +130,7 @@ function ensQuery(addressOrEnsName?: string) {
         return placeholderData;
       }
       // if it is neither an address or an ens name then return the placeholder data only
-      if (!isAddress(addressOrEnsName) && !isEnsName(addressOrEnsName)) {
+      if (!isAddress(addressOrEnsName) && !isValidENSName(addressOrEnsName)) {
         throw new Error("Invalid address or ENS name.");
       }
 
@@ -143,7 +143,7 @@ function ensQuery(addressOrEnsName?: string) {
         }),
       );
 
-      if (isEnsName(addressOrEnsName) && !address) {
+      if (isValidENSName(addressOrEnsName) && !address) {
         throw new Error("Failed to resolve ENS name.");
       }
 
@@ -154,7 +154,7 @@ function ensQuery(addressOrEnsName?: string) {
     },
     enabled:
       !!addressOrEnsName &&
-      (isAddress(addressOrEnsName) || isEnsName(addressOrEnsName)),
+      (isAddress(addressOrEnsName) || isValidENSName(addressOrEnsName)),
     // 24h
     gcTime: 60 * 60 * 24 * 1000,
     // 1h
diff --git a/apps/dashboard/src/components/contract-components/published-contract/index.tsx b/apps/dashboard/src/components/contract-components/published-contract/index.tsx
@@ -42,13 +42,11 @@ interface ExtendedPublishedContract extends PublishedContractWithVersion {
 
 interface PublishedContractProps {
   publishedContract: ExtendedPublishedContract;
-  walletOrEns: string;
   twAccount: Account | undefined;
 }
 
 export const PublishedContract: React.FC<PublishedContractProps> = ({
   publishedContract,
-  walletOrEns,
   twAccount,
 }) => {
   const address = useActiveAccount()?.address;
@@ -154,7 +152,9 @@ export const PublishedContract: React.FC<PublishedContractProps> = ({
       </GridItem>
       <GridItem colSpan={{ base: 12, md: 3 }}>
         <Flex flexDir="column" gap={6}>
-          {walletOrEns && <PublisherHeader wallet={walletOrEns} />}
+          {publishedContract.publisher && (
+            <PublisherHeader wallet={publishedContract.publisher} />
+          )}
           <Divider />
           <Flex flexDir="column" gap={4}>
             <Heading as="h4" size="title.sm">
diff --git a/apps/dashboard/src/components/contract-components/publisher/publisher-header.tsx b/apps/dashboard/src/components/contract-components/publisher/publisher-header.tsx
@@ -83,11 +83,16 @@ export const PublisherHeader: React.FC<PublisherHeaderProps> = ({
             >
               <AccountName
                 fallbackComponent={
-                  <AccountAddress
-                    formatFn={(addr) =>
-                      shortenIfAddress(replaceDeployerAddress(addr))
-                    }
-                  />
+                  // When social profile API support other TLDs as well - we can remove this condition
+                  ensQuery.data?.ensName ? (
+                    <span> {ensQuery.data?.ensName} </span>
+                  ) : (
+                    <AccountAddress
+                      formatFn={(addr) =>
+                        shortenIfAddress(replaceDeployerAddress(addr))
+                      }
+                    />
+                  )
                 }
                 loadingComponent={<Skeleton className="h-8 w-40" />}
                 formatFn={(name) => replaceDeployerAddress(name)}
diff --git a/apps/dashboard/src/lib/address-utils.ts b/apps/dashboard/src/lib/address-utils.ts
@@ -1,12 +1,12 @@
 import { isAddress } from "thirdweb";
-import { isEnsName } from "./ens";
+import { isValidENSName } from "thirdweb/utils";
 
 // if a string is a valid address or ens name
 export function isPossibleEVMAddress(address?: string, ignoreEns?: boolean) {
   if (!address) {
     return false;
   }
-  if (isEnsName(address) && !ignoreEns) {
+  if (isValidENSName(address) && !ignoreEns) {
     return true;
   }
   return isAddress(address);
diff --git a/apps/dashboard/src/lib/ens.ts b/apps/dashboard/src/lib/ens.ts
@@ -1,16 +1,13 @@
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { isAddress } from "thirdweb";
 import { resolveAddress, resolveName } from "thirdweb/extensions/ens";
+import { isValidENSName } from "thirdweb/utils";
 
 interface ENSResolveResult {
   ensName: string | null;
   address: string | null;
 }
 
-export function isEnsName(name: string): boolean {
-  return name?.endsWith(".eth");
-}
-
 export async function resolveEns(
   ensNameOrAddress: string,
 ): Promise<ENSResolveResult> {
@@ -24,7 +21,7 @@ export async function resolveEns(
     };
   }
 
-  if (!isEnsName(ensNameOrAddress)) {
+  if (!isValidENSName(ensNameOrAddress)) {
     throw new Error("Invalid ENS name");
   }
 
diff --git a/apps/dashboard/src/middleware.ts b/apps/dashboard/src/middleware.ts
@@ -4,6 +4,7 @@ import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
 import { type NextRequest, NextResponse } from "next/server";
 import { getAddress } from "thirdweb";
 import { getChainMetadata } from "thirdweb/chains";
+import { isValidENSName } from "thirdweb/utils";
 import { defineDashboardChain } from "./lib/defineDashboardChain";
 
 // ignore assets, api - only intercept page routes
@@ -136,7 +137,7 @@ export async function middleware(request: NextRequest) {
   // DIFFERENT DYNAMIC ROUTING CASES
 
   // /<address>/... case
-  if (paths[0] && isPossibleEVMAddress(paths[0])) {
+  if (paths[0] && isPossibleAddressOrENSName(paths[0])) {
     // special case for "deployer.thirdweb.eth"
     // we want to always redirect this to "thirdweb.eth/..."
     if (paths[0] === "deployer.thirdweb.eth") {
@@ -181,8 +182,8 @@ export async function middleware(request: NextRequest) {
   }
 }
 
-function isPossibleEVMAddress(address: string) {
-  return address?.startsWith("0x") || address?.endsWith(".eth");
+function isPossibleAddressOrENSName(address: string) {
+  return address.startsWith("0x") || isValidENSName(address);
 }
 
 // utils for rewriting and redirecting with relative paths
diff --git a/packages/thirdweb/src/exports/utils.ts b/packages/thirdweb/src/exports/utils.ts
@@ -208,3 +208,6 @@ export type {
 
 export { shortenLargeNumber } from "../utils/shortenLargeNumber.js";
 export { formatNumber } from "../utils/formatNumber.js";
+
+// ENS
+export { isValidENSName } from "../utils/ens/isValidENSName.js";
diff --git a/packages/thirdweb/src/react/core/hooks/wallets/useSendToken.ts b/packages/thirdweb/src/react/core/hooks/wallets/useSendToken.ts
@@ -6,6 +6,7 @@ import { transfer } from "../../../../extensions/erc20/write/transfer.js";
 import { sendTransaction } from "../../../../transaction/actions/send-transaction.js";
 import { prepareTransaction } from "../../../../transaction/prepare-transaction.js";
 import { isAddress } from "../../../../utils/address.js";
+import { isValidENSName } from "../../../../utils/ens/isValidENSName.js";
 import { toWei } from "../../../../utils/units.js";
 import { useActiveWallet } from "./useActiveWallet.js";
 
@@ -53,7 +54,7 @@ export function useSendToken(client: ThirdwebClient) {
       // input validation
       if (
         !receiverAddress ||
-        (!receiverAddress.endsWith(".eth") && !isAddress(receiverAddress))
+        (!isValidENSName(receiverAddress) && !isAddress(receiverAddress))
       ) {
         throw new Error("Invalid receiver address");
       }
diff --git a/packages/thirdweb/src/utils/ens/isValidENSName.test.ts b/packages/thirdweb/src/utils/ens/isValidENSName.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { isValidENSName } from "./isValidENSName.js";
+
+describe("isValidENSName", () => {
+  it("should return true for a valid ENS name", () => {
+    expect(isValidENSName("thirdweb.eth")).toBe(true);
+    expect(isValidENSName("deployer.thirdweb.eth")).toBe(true);
+    expect(isValidENSName("x.eth")).toBe(true);
+    expect(isValidENSName("foo.bar.com")).toBe(true);
+    expect(isValidENSName("foo.com")).toBe(true);
+    expect(isValidENSName("somename.xyz")).toBe(true);
+  });
+
+  it("should return false for an invalid ENS name", () => {
+    // No TLD
+    expect(isValidENSName("")).toBe(false);
+    expect(isValidENSName("foo")).toBe(false);
+
+    // parts with length < 2
+    expect(isValidENSName(".eth")).toBe(false);
+    expect(isValidENSName("thirdweb.eth.")).toBe(false);
+
+    // numeric TLD
+    expect(isValidENSName("foo.123")).toBe(false);
+
+    // whitespace in parts
+    expect(isValidENSName("foo .com")).toBe(false);
+    expect(isValidENSName("foo. com")).toBe(false);
+
+    // full-width characters
+    expect(isValidENSName("ｆｏｏ.bar.com")).toBe(false);
+
+    // wildcard characters
+    expect(isValidENSName("foo*bar.com")).toBe(false);
+
+    // starts with a hyphen
+    expect(isValidENSName("-foo.bar.com")).toBe(false);
+    // ends with a hyphen
+    expect(isValidENSName("foo.bar.com-")).toBe(false);
+
+    // underscore
+    expect(isValidENSName("foo_bar.com")).toBe(false);
+  });
+});
diff --git a/packages/thirdweb/src/utils/ens/isValidENSName.ts b/packages/thirdweb/src/utils/ens/isValidENSName.ts
@@ -0,0 +1,62 @@
+/**
+ * Checks if a string is a valid ENS name.
+ * It does not check if the ENS name is currently registered or resolves to an address - it only validates the string format.
+ *
+ * @param name - The ENS name to check.
+ *
+ * @example
+ * ```ts
+ * isValidENSName("thirdweb.eth"); // true
+ * isValidENSName("foo.bar.com"); // true
+ * isValidENSName("xyz"); // false
+ */
+export function isValidENSName(name: string) {
+  return isFQDN(name);
+}
+
+// modified version of isFQDN from validator.js that checks if given string is a valid domain name
+// take from: https://github.com/validatorjs/validator.js/blob/master/src/lib/isFQDN.js
+
+function isFQDN(str: string) {
+  const parts = str.split(".");
+  const tld = parts[parts.length - 1];
+
+  // disallow fqdns without tld
+  if (parts.length < 2 || !tld) {
+    return false;
+  }
+
+  // disallow spaces
+  if (/\s/.test(tld)) {
+    return false;
+  }
+
+  // reject numeric TLDs
+  if (/^\d+$/.test(tld)) {
+    return false;
+  }
+
+  return parts.every((part) => {
+    // disallow invalid chars
+    if (!/^[a-z_\u00a1-\uffff0-9-]+$/i.test(part)) {
+      return false;
+    }
+
+    // disallow full-width chars
+    if (/[\uff01-\uff5e]/.test(part)) {
+      return false;
+    }
+
+    // disallow parts starting or ending with hyphen
+    if (/^-|-$/.test(part)) {
+      return false;
+    }
+
+    // disallow underscore
+    if (/_/.test(part)) {
+      return false;
+    }
+
+    return true;
+  });
+}

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,12 @@`
`1`	`1`	`import { isAddress } from "thirdweb";`
`2`		`-import { isEnsName } from "./ens";`
	`2`	`+import { isValidENSName } from "thirdweb/utils";`
`3`	`3`
`4`	`4`	`// if a string is a valid address or ens name`
`5`	`5`	`export function isPossibleEVMAddress(address?: string, ignoreEns?: boolean) {`
`6`	`6`	`if (!address) {`
`7`	`7`	`return false;`
`8`	`8`	`}`
`9`		`- if (isEnsName(address) && !ignoreEns) {`
	`9`	`+ if (isValidENSName(address) && !ignoreEns) {`
`10`	`10`	`return true;`
`11`	`11`	`}`
`12`	`12`	`return isAddress(address);`