[DASH-601] Fix stretched ENS avatar image + Replace MediaRenderer wit…

…h Image in WalletAddress component (#5772)

## 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 -->

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} />
       )}

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" />

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>
 

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