use social SDK for publisher page (#5639)

closes: DASH-547

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on removing unused components and optimizing existing code related to publisher profiles and social media integration. It also introduces improvements to error handling and modifies the account components to avoid retrying on failures.

### Detailed summary
- Deleted several unused icon and component files.
- Set `retry: false` for account components in `thirdweb`.
- Added `replaceDeployerAddress` function to `publisher-utils`.
- Refactored profile handling to utilize social profiles.
- Removed unused profile schema definitions.
- Updated `ProfileUI` to use `ProfileHeader` for displaying user info.
- Simplified `ContractPublisher` to use `AccountProvider`.
- Enhanced error handling in various components.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: jnsdls

.changeset/blue-bees-ring.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+default account components to not retry on failure

apps/dashboard/src/@/components/ui/code/getCodeHtml.tsx

@@ -25,10 +25,6 @@ export async function getCodeHtml(code: string, lang: BundledLanguage) {
       }).catch((e) => {
         console.error(e);
         console.error("Failed to format code");
-        console.log({
-          code,
-          lang,
-        });
         return code;
       })
     : code;

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

@@ -1,62 +1,20 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { fetchPublishedContracts } from "components/contract-components/fetchPublishedContracts";
-import { PublisherSocials } from "components/contract-components/publisher/PublisherSocials";
-import { EditProfile } from "components/contract-components/publisher/edit-profile";
-import { PublisherAvatar } from "components/contract-components/publisher/masked-avatar";
 import { DeployedContracts } from "components/contract-components/tables/deployed-contracts";
-import type { ProfileMetadata } from "constants/schemas";
 import { Suspense } from "react";
-import { shortenIfAddress } from "utils/usedapp-external";
 import { getSortedDeployedContracts } from "../../../account/contracts/_components/getSortedDeployedContracts";
+import { ProfileHeader } from "./components/profile-header";
 import { PublishedContracts } from "./components/published-contracts";
 
 export function ProfileUI(props: {
   profileAddress: string;
   ensName: string | undefined;
-  publisherProfile: ProfileMetadata | null;
-  showEditProfile: boolean;
 }) {
-  const { profileAddress, ensName, publisherProfile, showEditProfile } = props;
-
-  const displayName = shortenIfAddress(ensName || profileAddress).replace(
-    "deployer.thirdweb.eth",
-    "thirdweb.eth",
-  );
+  const { profileAddress, ensName } = props;
 
   return (
     <div className="container pt-8 pb-20">
-      {/* Header */}
-      <div className="flex w-full flex-col items-center justify-between gap-4 border-border border-b pb-6 md:flex-row">
-        <div className="flex w-full items-center gap-4">
-          <PublisherAvatar address={profileAddress} className="size-20" />
-          <div>
-            <h1 className="font-semibold text-4xl tracking-tight">
-              {displayName}
-            </h1>
-
-            {publisherProfile?.bio && (
-              <p className="line-clamp-2 text-muted-foreground">
-                {publisherProfile.bio}
-              </p>
-            )}
-
-            <div className="-translate-x-2 mt-1">
-              {publisherProfile && (
-                <PublisherSocials publisherProfile={publisherProfile} />
-              )}
-            </div>
-          </div>
-        </div>
-
-        {showEditProfile && (
-          <div className="shrink-0">
-            {publisherProfile && (
-              <EditProfile publisherProfile={publisherProfile} />
-            )}
-          </div>
-        )}
-      </div>
-
+      <ProfileHeader profileAddress={profileAddress} />
       <div className="h-8" />
 
       <div>

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

@@ -11,8 +11,8 @@ import {
 } from "@/components/ui/table";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { replaceDeployerAddress } from "components/explore/publisher";
 import { useTrack } from "hooks/analytics/useTrack";
+import { replaceDeployerAddress } from "lib/publisher-utils";
 import { replaceIpfsUrl } from "lib/sdk";
 import { ShieldCheckIcon } from "lucide-react";
 import Link from "next/link";

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

@@ -0,0 +1,47 @@
+"use client";
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { replaceDeployerAddress } from "lib/publisher-utils";
+import {
+  AccountAddress,
+  AccountAvatar,
+  AccountBlobbie,
+  AccountName,
+  AccountProvider,
+} from "thirdweb/react";
+import { shortenIfAddress } from "utils/usedapp-external";
+
+export function ProfileHeader(props: { profileAddress: string }) {
+  const client = useThirdwebClient();
+  return (
+    <AccountProvider address={props.profileAddress} client={client}>
+      <div className="flex w-full flex-col items-center justify-between gap-4 border-border border-b pb-6 md:flex-row">
+        <div className="flex w-full items-center gap-4">
+          <AccountAvatar
+            className="size-20 rounded-full"
+            loadingComponent={<Skeleton className="size-20 rounded-full" />}
+            fallbackComponent={
+              <AccountBlobbie className="size-20 rounded-full" />
+            }
+          />
+          <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)}
+              />
+            </h1>
+          </div>
+        </div>
+      </div>
+    </AccountProvider>
+  );
+}

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

@@ -1,8 +1,6 @@
-import { getActiveAccountCookie } from "@/constants/cookie";
-import { fetchPublisherProfile } from "components/contract-components/fetch-contracts-with-versions";
+import { replaceDeployerAddress } from "lib/publisher-utils";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
-import { getAddress } from "thirdweb/utils";
 import { shortenIfAddress } from "utils/usedapp-external";
 import { ProfileUI } from "./ProfileUI";
 import { resolveAddressAndEns } from "./resolveAddressAndEns";
@@ -16,22 +14,15 @@ type PageProps = {
 export default async function Page(props: PageProps) {
   const params = await props.params;
   const resolvedInfo = await resolveAddressAndEns(params.addressOrEns);
-  const currentUserAddress = await getCurrentUserAddress();
 
   if (!resolvedInfo) {
     return notFound();
   }
 
-  const publisherProfile = await fetchPublisherProfile(
-    resolvedInfo.address,
-  ).catch(() => null);
-
   return (
     <ProfileUI
       ensName={resolvedInfo.ensName}
       profileAddress={resolvedInfo.address}
-      publisherProfile={publisherProfile}
-      showEditProfile={currentUserAddress === resolvedInfo.address}
     />
   );
 }
@@ -45,23 +36,11 @@ export async function generateMetadata(props: PageProps): Promise<Metadata> {
   }
 
   const displayName = shortenIfAddress(
-    resolvedInfo.ensName || resolvedInfo.address,
-  ).replace("deployer.thirdweb.eth", "thirdweb.eth");
+    replaceDeployerAddress(resolvedInfo.ensName || resolvedInfo.address),
+  );
 
   return {
     title: displayName,
     description: `Visit ${displayName}'s profile. See their published contracts and deploy them in one click.`,
   };
 }
-
-async function getCurrentUserAddress() {
-  try {
-    const currentUserAddress = await getActiveAccountCookie();
-    if (!currentUserAddress) {
-      return null;
-    }
-    return getAddress(currentUserAddress);
-  } catch {
-    return null;
-  }
-}

apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/opengraph-image.tsx

@@ -1,6 +1,8 @@
-import { fetchPublisherProfile } from "components/contract-components/fetch-contracts-with-versions";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { format } from "date-fns/format";
+import { resolveEns } from "lib/ens";
 import { correctAndUniqueLicenses } from "lib/licenses";
+import { getSocialProfiles } from "thirdweb/social";
 import { getPublishedContractsWithPublisherMapping } from "../utils/getPublishedContractsWithPublisherMapping";
 import { publishedContractOGImageTemplate } from "../utils/publishedContractOGImageTemplate";
 
@@ -18,20 +20,33 @@ export default async function Image(props: {
     version: string;
   };
 }) {
+  const client = getThirdwebClient();
   const { publisher, contract_id } = props.params;
 
-  const [publishedContracts, publisherProfile] = await Promise.all([
+  const [publishedContracts, socialProfiles] = await Promise.all([
     getPublishedContractsWithPublisherMapping({
       publisher: publisher,
       contract_id: contract_id,
     }),
-    fetchPublisherProfile(publisher),
+    getSocialProfiles({
+      address: (await resolveEns(publisher)).address || publisher,
+      client,
+    }),
   ]);
 
   if (!publishedContracts) {
     return null;
   }
 
+  const publisherProfile = (() => {
+    const name = socialProfiles.find((p) => p.name)?.name || publisher;
+    const avatar = socialProfiles.find((p) => p.avatar)?.avatar;
+    return {
+      name,
+      avatar,
+    };
+  })();
+
   const publishedContract =
     publishedContracts.find((p) => p.version === props.params.version) ||
     publishedContracts[0];

apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/opengraph-image.tsx

@@ -1,6 +1,8 @@
-import { fetchPublisherProfile } from "components/contract-components/fetch-contracts-with-versions";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { format } from "date-fns/format";
+import { resolveEns } from "lib/ens";
 import { correctAndUniqueLicenses } from "lib/licenses";
+import { getSocialProfiles } from "thirdweb/social";
 import { getPublishedContractsWithPublisherMapping } from "./utils/getPublishedContractsWithPublisherMapping";
 import { publishedContractOGImageTemplate } from "./utils/publishedContractOGImageTemplate";
 
@@ -17,16 +19,29 @@ export default async function Image(props: {
     contract_id: string;
   };
 }) {
+  const client = getThirdwebClient();
   const { publisher, contract_id } = props.params;
 
-  const [publishedContracts, publisherProfile] = await Promise.all([
+  const [publishedContracts, socialProfiles] = await Promise.all([
     getPublishedContractsWithPublisherMapping({
       publisher: publisher,
       contract_id: contract_id,
     }),
-    fetchPublisherProfile(publisher),
+    getSocialProfiles({
+      address: (await resolveEns(publisher)).address || publisher,
+      client,
+    }),
   ]);
 
+  const publisherProfile = (() => {
+    const name = socialProfiles.find((p) => p.name)?.name || publisher;
+    const avatar = socialProfiles.find((p) => p.avatar)?.avatar;
+    return {
+      name,
+      avatar,
+    };
+  })();
+
   if (!publishedContracts) {
     return null;
   }

apps/dashboard/src/components/contract-components/fetch-contracts-with-versions.ts

@@ -1,14 +1,11 @@
 import { getThirdwebClient } from "@/constants/thirdweb.server";
-import type { ProfileMetadata } from "constants/schemas";
 import { isAddress } from "thirdweb";
 import { fetchDeployMetadata } from "thirdweb/contract";
 import { resolveAddress } from "thirdweb/extensions/ens";
 import {
   getContractPublisher,
   getPublishedContractVersions,
-  getPublisherProfileUri,
 } from "thirdweb/extensions/thirdweb";
-import { download } from "thirdweb/storage";
 
 export function mapThirdwebPublisher(publisher: string) {
   if (publisher === "thirdweb.eth") {
@@ -18,34 +15,6 @@ export function mapThirdwebPublisher(publisher: string) {
   return publisher;
 }
 
-export async function fetchPublisherProfile(publisherAddress: string) {
-  const client = getThirdwebClient();
-
-  const profileUri = await getPublisherProfileUri({
-    contract: getContractPublisher(client),
-    publisher: isAddress(publisherAddress)
-      ? publisherAddress
-      : await resolveAddress({
-          client,
-          name: mapThirdwebPublisher(publisherAddress),
-        }),
-  });
-
-  if (!profileUri) {
-    return null;
-  }
-
-  try {
-    const res = await download({
-      client,
-      uri: profileUri,
-    });
-    return res.json() as Promise<ProfileMetadata>;
-  } catch {
-    return null;
-  }
-}
-
 export async function fetchPublishedContractVersions(
   publisherAddress: string,
   contractId: string,

apps/dashboard/src/components/contract-components/hooks.ts

@@ -12,32 +12,10 @@ import { isAddress } from "thirdweb/utils";
 import {
   type PublishedContractWithVersion,
   fetchPublishedContractVersions,
-  fetchPublisherProfile,
 } from "./fetch-contracts-with-versions";
 import { fetchPublishedContracts } from "./fetchPublishedContracts";
 import { fetchPublishedContractsFromDeploy } from "./fetchPublishedContractsFromDeploy";
 
-function publisherProfileQuery(publisherAddress?: string) {
-  return queryOptions({
-    queryKey: ["releaser-profile", publisherAddress],
-    queryFn: () => {
-      if (!publisherAddress) {
-        throw new Error("publisherAddress is not defined");
-      }
-      return fetchPublisherProfile(publisherAddress);
-    },
-    enabled: !!publisherAddress,
-    // 24h
-    gcTime: 60 * 60 * 24 * 1000,
-    // 1h
-    staleTime: 60 * 60 * 1000,
-  });
-}
-
-export function usePublisherProfile(publisherAddress?: string) {
-  return useQuery(publisherProfileQuery(publisherAddress));
-}
-
 export function useAllVersions(
   publisherAddress: string | undefined,
   contractId: string | undefined,