use social SDK for publisher page

Author: jnsdls

.changeset/blue-bees-ring.md

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

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/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,
@@ -169,6 +147,8 @@ function ensQuery(addressOrEnsName?: string) {
         throw new Error("Failed to resolve ENS name.");
       }
 
+      console.log("ensQuery", { address, ensName });
+
       return {
         address,
         ensName,