Remove usages of legacy useProfileFeild

packages/web/components/Player/PlayerAvatar.tsx

@@ -1,9 +1,8 @@
 import { Avatar, AvatarProps, useToast } from '@metafam/ds';
 import { Player } from 'graphql/autogen/types';
 import { GuildPlayer } from 'graphql/types';
-import { useProfileField } from 'lib/hooks';
 import { usePlayerName } from 'lib/hooks/player/usePlayerName';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { getPlayerImage, hasImage } from 'utils/playerHelpers';
 
 type PlayerAvatarProps = AvatarProps & {
@@ -16,16 +15,12 @@ export const PlayerAvatar: React.FC<PlayerAvatarProps> = React.forwardRef<
 >(({ player: user, src, ...props }, ref) => {
   const player = user as Player;
   const name = usePlayerName(player);
-  const { value: image } = useProfileField({
-    field: 'profileImageURL',
-    player,
-    getter: getPlayerImage,
-  });
+  const avatarImg = useMemo(() => src ?? getPlayerImage(player), [player, src]);
 
   const toast = useToast();
 
   const attrs = {
-    src: src ?? image ?? undefined,
+    src: avatarImg ?? undefined,
     name: name ?? undefined,
     color: 'white',
     ...props,

packages/web/components/Player/PlayerProfilePicture.tsx

@@ -2,7 +2,7 @@ import type { AvatarProps } from '@metafam/ds';
 import { SquareImage } from 'components/SquareImage';
 import type { Player } from 'graphql/autogen/types';
 import type { GuildPlayer } from 'graphql/types';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { getPlayerImage } from 'utils/playerHelpers';
 
 type PlayerProfilePictureProps = AvatarProps & {
@@ -10,16 +10,15 @@ type PlayerProfilePictureProps = AvatarProps & {
 };
 
 export const PlayerProfilePicture: React.FC<PlayerProfilePictureProps> = ({
-  player: user,
-  src: source,
+  player,
+  src,
   ...props
 }) => {
-  const player = user as Player;
-  const src = source ?? getPlayerImage(player) ?? undefined;
+  const avatarImg = useMemo(() => src ?? getPlayerImage(player), [player, src]);
 
   return (
     <>
-      <SquareImage {...{ src, ...props }} />
+      <SquareImage src={avatarImg ?? undefined} {...props} />
     </>
   );
 };

packages/web/components/Player/PlayerProfilePictureRound.tsx

@@ -2,8 +2,7 @@ import type { AvatarProps } from '@metafam/ds';
 import { RoundImage } from 'components/RoundImage';
 import type { Player } from 'graphql/autogen/types';
 import type { GuildPlayer } from 'graphql/types';
-import { useProfileField } from 'lib/hooks';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { getPlayerImage } from 'utils/playerHelpers';
 
 type PlayerProfilePictureProps = AvatarProps & {
@@ -11,22 +10,15 @@ type PlayerProfilePictureProps = AvatarProps & {
 };
 
 export const PlayerProfilePictureRound: React.FC<PlayerProfilePictureProps> = ({
-  player: user,
-  src: source,
+  player,
+  src,
   ...props
 }) => {
-  const player = user as Player;
-  const { value: image } = useProfileField({
-    field: 'profileImageURL',
-    player,
-    getter: getPlayerImage,
-  });
-
-  const src = source ?? image ?? undefined;
+  const avatarImg = useMemo(() => src ?? getPlayerImage(player), [player, src]);
 
   return (
     <>
-      <RoundImage {...{ src, ...props }} />
+      <RoundImage src={avatarImg ?? undefined} {...props} />
     </>
   );
 };

packages/web/pages/player/[username].tsx

@@ -169,6 +169,8 @@ const PlayerPageContent: React.FC<{ ens?: string }> = ({ ens }) => {
     [player],
   );
 
+  const avatarImg = useMemo(() => getPlayerImage(player), [player]);
+
   if (router.isFallback) {
     return <LoadingState />;
   }
@@ -202,7 +204,7 @@ const PlayerPageContent: React.FC<{ ens?: string }> = ({ ens }) => {
         title={`MetaGame Profile: ${header}`}
         description={(getPlayerDescription(player) ?? '').replace('\n', ' ')}
         url={linkURL}
-        img={getPlayerImage(player)}
+        img={avatarImg}
       />
       {banner != null ? (
         <Box