[DASH-601] Fix stretched ENS avatar image + Remove MediaRenderer from…

… WalletAddress component and use image directly
thirdweb-dev · Dec 17, 2024 · 11294b6 · 11294b6
1 parent bdb27e4
commit 11294b6
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 15 deletions.
diff --git a/apps/dashboard/src/@/components/blocks/wallet-address.tsx b/apps/dashboard/src/@/components/blocks/wallet-address.tsx
@@ -12,15 +12,11 @@ import { Check, Copy, ExternalLinkIcon } from "lucide-react";
 import { useMemo } from "react";
 import { type ThirdwebClient, isAddress } from "thirdweb";
 import { ZERO_ADDRESS } from "thirdweb";
-import {
-  Blobbie,
-  MediaRenderer,
-  type SocialProfile,
-  useSocialProfiles,
-} from "thirdweb/react";
+import { Blobbie, type SocialProfile, useSocialProfiles } from "thirdweb/react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
+import { Img } from "./Img";
 
 export function WalletAddress(props: {
   address: string | undefined;
@@ -182,14 +178,18 @@ function WalletAvatar(props: {
           profile.avatar.startsWith("ipfs")),
     )?.avatar;
   }, [props.profiles]);
+
+  const resolvedAvatarSrc = avatar
+    ? resolveSchemeWithErrorHandler({
+        client: props.thirdwebClient,
+        uri: avatar,
+      })
+    : undefined;
+
   return (
     <div className="size-6 overflow-hidden rounded-full">
-      {avatar ? (
-        <MediaRenderer
-          client={props.thirdwebClient}
-          src={avatar}
-          className="size-6"
-        />
+      {resolvedAvatarSrc ? (
+        <Img src={resolvedAvatarSrc} className="size-6 object-cover" />
       ) : (
         <Blobbie address={props.address} size={24} />
       )}

diff --git a/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/components/profile-header.tsx b/apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/components/profile-header.tsx
@@ -22,7 +22,7 @@ export function ProfileHeader(props: {
       <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"
+            className="size-20 rounded-full object-cover"
             loadingComponent={<Skeleton className="size-20 rounded-full" />}
             fallbackComponent={
               <AccountBlobbie className="size-20 rounded-full" />

diff --git a/apps/dashboard/src/components/contract-components/publisher/publisher-header.tsx b/apps/dashboard/src/components/contract-components/publisher/publisher-header.tsx
@@ -65,7 +65,7 @@ export const PublisherHeader: React.FC<PublisherHeaderProps> = ({
                   <AccountBlobbie className="size-14 rounded-full" />
                 }
                 loadingComponent={<Skeleton className="size-14 rounded-full" />}
-                className="size-14 rounded-full"
+                className="size-14 rounded-full object-cover"
               />
             </Link>
 

diff --git a/apps/dashboard/src/components/explore/publisher/index.tsx b/apps/dashboard/src/components/explore/publisher/index.tsx
@@ -30,7 +30,7 @@ export const ContractPublisher: React.FC<ContractPublisherProps> = ({
         <AccountAvatar
           fallbackComponent={<AccountBlobbie className="size-5 rounded-full" />}
           loadingComponent={<Skeleton className="size-5 rounded-full" />}
-          className="size-5 rounded-full"
+          className="size-5 rounded-full object-cover"
         />
 
         <AccountName