Fix transparent bg profile img bug [fixes 385]

packages/design-system/src/index.ts

@@ -31,6 +31,7 @@ export {
   AlertDialogHeader,
   AlertDialogOverlay,
   Avatar,
+  AvatarProps,
   Badge,
   Box,
   Button,

packages/web/components/Player/PlayerAvatar.tsx

@@ -0,0 +1,24 @@
+import { Avatar, AvatarProps } from '@metafam/ds';
+import React from 'react';
+
+import { PlayerFragmentFragment } from '../../graphql/autogen/types';
+import {
+	getPlayerImage,
+	getPlayerName,
+	hasPlayerImage,
+} from '../../utils/playerHelpers';
+
+type PlayerAvatarProps = AvatarProps & { player: PlayerFragmentFragment };
+export const PlayerAvatar: React.FC<PlayerAvatarProps> = ({
+	player,
+	...props
+}) => {
+	const attrs = {
+		src: getPlayerImage(player),
+		name: getPlayerName(player),
+		...props,
+	};
+	if (hasPlayerImage(player)) attrs.bg = 'transparent';
+
+	return <Avatar {...attrs} />;
+};

packages/web/components/Player/PlayerTile.tsx

@@ -1,5 +1,4 @@
 import {
-  Avatar,
   Box,
   Heading,
   HStack,
@@ -20,9 +19,9 @@ import { PlayerFragmentFragment, Skill } from 'graphql/autogen/types';
 import React from 'react';
 import {
   getPlayerCoverImage,
-  getPlayerImage,
   getPlayerName,
 } from 'utils/playerHelpers';
+import { PlayerAvatar } from 'components/Player/PlayerAvatar';
 
 type Props = {
   player: PlayerFragmentFragment;
@@ -47,11 +46,7 @@ export const PlayerTile: React.FC<Props> = ({ player }) => (
         key={player.id}
       >
         <VStack>
-          <Avatar
-            size="xl"
-            src={getPlayerImage(player)}
-            name={getPlayerName(player)}
-          />
+          <PlayerAvatar player={player} size="xl" />
           <Heading size="xs" color="white">
             {getPlayerName(player)}
           </Heading>

packages/web/utils/playerHelpers.ts

@@ -21,3 +21,6 @@ export const formatAddress = (address = ''): string =>
 
 export const formatUsernameIfAddress = (username = ''): string =>
   ethers.utils.isAddress(username) ? formatAddress(username) : username;
+
+  export const hasPlayerImage = (player: PlayerFragmentFragment): boolean =>
+  !!player.box_profile?.imageUrl;