From 11294b63e21a92ef23d7856296623e65f9694d50 Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Tue, 17 Dec 2024 19:07:26 +0530
Subject: [PATCH] [DASH-601] Fix stretched ENS avatar image + Remove
 MediaRenderer from WalletAddress component and use image directly

---
 .../@/components/blocks/wallet-address.tsx    | 24 +++++++++----------
 .../components/profile-header.tsx             |  2 +-
 .../publisher/publisher-header.tsx            |  2 +-
 .../components/explore/publisher/index.tsx    |  2 +-
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/dashboard/src/@/components/blocks/wallet-address.tsx b/apps/dashboard/src/@/components/blocks/wallet-address.tsx
index bee1e2611b7..a4fc5fd4b6c 100644
--- 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
index fb2dd1103c7..eb381c98354 100644
--- 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
index 115062b607d..36b15bb72db 100644
--- 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
index a52561ed787..f486a18e2b1 100644
--- 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