use social SDK for publisher page

.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,