seperate round PFP into own component exchange useEffect & useState w…

…ith useMemo

packages/web/components/Landing/UserGrid.tsx

@@ -1,5 +1,5 @@
 import { Box, Link, Text } from '@metafam/ds';
-import { PlayerProfilePicture } from 'components/Player/PlayerProfilePicture';
+import { PlayerProfilePictureRound } from 'components/Player/PlayerProfilePictureRound';
 import { RoundImage } from 'components/RoundImage';
 import { GuildFragment, Player } from 'graphql/autogen/types';
 import React from 'react';
@@ -55,7 +55,7 @@ export const UserGrid: React.FC<{
               textAlign: 'center',
             }}
           >
-            <PlayerProfilePicture {...{ player }} round={true} size="xxs" />
+            <PlayerProfilePictureRound {...{ player }} size="xxs" />
             <Text sx={{ fontSize: 'xs' }} noOfLines={1}>
               {player.profile?.name || formatAddress(player.ethereumAddress)}
             </Text>

packages/web/components/Landing/WhoAreWe.tsx

@@ -9,12 +9,12 @@ import {
 import BackgroundImageMobile from 'assets/landing/sections/section-5.sm.webp';
 import BackgroundImageDesktop from 'assets/landing/sections/section-5.webp';
 import { FullPageContainer } from 'components/Container';
-import { GuildFragment, Player } from 'graphql/autogen/types';
+import { GuildFragment } from 'graphql/autogen/types';
 import { Patron } from 'graphql/types';
 import { usePlayerFilter } from 'lib/hooks/player/players';
 import { useMotionDetector } from 'lib/hooks/useMotionDetector';
 import { useOnScreen } from 'lib/hooks/useOnScreen';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useMemo, useRef } from 'react';
 
 import { LandingNextButton } from './LandingNextButton';
 import { LandingPageSectionProps } from './landingSection';
@@ -79,13 +79,8 @@ export const WhoAreWe: React.FC<
   });
 
   const { players } = usePlayerFilter();
-  const [topPlayers, setTopPlayers] = useState<Player[]>();
 
-  useEffect(() => {
-    if (players.length) {
-      setTopPlayers(players.slice(0, 7));
-    }
-  }, [players]);
+  const topPlayers = useMemo(() => players.slice(0, 7), [players]);
 
   return (
     <FullPageContainer

packages/web/components/Player/PlayerProfilePicture.tsx

@@ -1,5 +1,4 @@
 import type { AvatarProps } from '@metafam/ds';
-import { RoundImage } from 'components/RoundImage';
 import { SquareImage } from 'components/SquareImage';
 import type { Player } from 'graphql/autogen/types';
 import type { GuildPlayer } from 'graphql/types';
@@ -9,13 +8,11 @@ import { getPlayerImage } from 'utils/playerHelpers';
 
 type PlayerProfilePictureProps = AvatarProps & {
   player?: Player | GuildPlayer;
-  round?: boolean;
 };
 
 export const PlayerProfilePicture: React.FC<PlayerProfilePictureProps> = ({
   player: user,
   src: source,
-  round = false,
   ...props
 }) => {
   const player = user as Player;
@@ -29,8 +26,7 @@ export const PlayerProfilePicture: React.FC<PlayerProfilePictureProps> = ({
 
   return (
     <>
-      {round && <RoundImage {...{ src, ...props }} />}
-      {!round && <SquareImage {...{ src, ...props }} />}
+      <SquareImage {...{ src, ...props }} />
     </>
   );
 };

packages/web/components/Player/PlayerProfilePictureRound.tsx

@@ -0,0 +1,32 @@
+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 { getPlayerImage } from 'utils/playerHelpers';
+
+type PlayerProfilePictureProps = AvatarProps & {
+  player?: Player | GuildPlayer;
+};
+
+export const PlayerProfilePictureRound: React.FC<PlayerProfilePictureProps> = ({
+  player: user,
+  src: source,
+  ...props
+}) => {
+  const player = user as Player;
+  const { value: image } = useProfileField({
+    field: 'profileImageURL',
+    player,
+    getter: getPlayerImage,
+  });
+
+  const src = source ?? image ?? undefined;
+
+  return (
+    <>
+      <RoundImage {...{ src, ...props }} />
+    </>
+  );
+};