From ae7d5f29f2fb7c2f4e23c5caff886fc67314d1a6 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 17 Dec 2024 16:32:17 +0000
Subject: [PATCH] [DASH-601] Fix stretched ENS avatar image + Replace
 MediaRenderer with Image in WalletAddress component (#5772)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the styling of various components by adding the `object-cover` class to ensure images maintain their aspect ratio and cover the designated area appropriately.

### Detailed summary
- Updated `className` in `publisher-header.tsx` to include `object-cover`.
- Updated `className` in `index.tsx` to include `object-cover`.
- Updated `className` in `profile-header.tsx` to include `object-cover`.
- Replaced `MediaRenderer` with `Img` in `wallet-address.tsx` for avatar rendering, adding `object-cover` to its `className`.

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

<!-- end pr-codex -->
---
 .../@/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