use resolved ENS name if available (#5734)

fixes: DASH-572

Author: jnsdls

apps/dashboard/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/dashboard/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "NODE_OPTIONS=--max-old-space-size=6144 next build",
     "start": "next start",
     "format": "biome format ./src --write",

apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx

@@ -14,7 +14,7 @@ export function ProfileUI(props: {
 
   return (
     <div className="container pt-8 pb-20">
-      <ProfileHeader profileAddress={profileAddress} />
+      <ProfileHeader profileAddress={profileAddress} ensName={ensName} />
       <div className="h-8" />
 
       <div>

apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/components/profile-header.tsx

@@ -12,7 +12,10 @@ import {
 } from "thirdweb/react";
 import { shortenIfAddress } from "utils/usedapp-external";
 
-export function ProfileHeader(props: { profileAddress: string }) {
+export function ProfileHeader(props: {
+  profileAddress: string;
+  ensName: string | undefined;
+}) {
   const client = useThirdwebClient();
   return (
     <AccountProvider address={props.profileAddress} client={client}>
@@ -27,17 +30,22 @@ export function ProfileHeader(props: { profileAddress: string }) {
           />
           <div>
             <h1 className="font-semibold text-4xl tracking-tight">
-              <AccountName
-                fallbackComponent={
-                  <AccountAddress
-                    formatFn={(addr) =>
-                      shortenIfAddress(replaceDeployerAddress(addr))
-                    }
-                  />
-                }
-                loadingComponent={<Skeleton className="h-8 w-40" />}
-                formatFn={(name) => replaceDeployerAddress(name)}
-              />
+              {/* if we already have an ensName just use it */}
+              {props.ensName ? (
+                props.ensName
+              ) : (
+                <AccountName
+                  fallbackComponent={
+                    <AccountAddress
+                      formatFn={(addr) =>
+                        shortenIfAddress(replaceDeployerAddress(addr))
+                      }
+                    />
+                  }
+                  loadingComponent={<Skeleton className="h-8 w-40" />}
+                  formatFn={(name) => replaceDeployerAddress(name)}
+                />
+              )}
             </h1>
           </div>
         </div>

apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/page.tsx

@@ -21,7 +21,7 @@ export default async function Page(props: PageProps) {
 
   return (
     <ProfileUI
-      ensName={resolvedInfo.ensName}
+      ensName={replaceDeployerAddress(resolvedInfo.ensName || "")}
       profileAddress={resolvedInfo.address}
     />
   );