fix display default photo in bounty

src/people/utils/NameTag.tsx

@@ -74,13 +74,15 @@ const Wrap = styled.div<WrapProps>`
 function NameTag(props: NameTagProps) {
   const { owner_alias, owner_pubkey, img, created, id, style, widget, iconSize, textSize, isPaid } =
     props;
-  const { ui } = useStores();
+  const { ui, main } = useStores();
   const color = colors['light'];
 
   const history = useHistory();
 
   const isMobile = useIsMobile();
 
+  const userImg = img || main.getUserAvatarPlaceholder(owner_pubkey);
+
   const isSelected = ui.selectedPerson === id ? true : false;
 
   function selectPerson(e: any) {
@@ -113,7 +115,7 @@ function NameTag(props: NameTagProps) {
       >
         {!isSelected && (
           <>
-            <Img src={img || `/static/person_placeholder.png`} iconSize={iconSize} />
+            <Img src={userImg} iconSize={iconSize} data-testid="user-avatar" />
             <Name
               textSize={textSize}
               color={color.grayish.G250}
@@ -147,7 +149,7 @@ function NameTag(props: NameTagProps) {
           flexDirection: 'row'
         }}
       >
-        <Img src={img || `/static/person_placeholder.png`} iconSize={32} isPaid={isPaid} />
+        <Img src={userImg} iconSize={32} isPaid={isPaid} data-testid="user-avatar" />
         <div
           style={{
             display: 'flex',

src/people/utils/__test__/NameTag.spec.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import * as StoreHooks from '../../../store';
+import { useIsMobile } from '../../../hooks';
+import NameTag from '../NameTag.tsx';
+
+jest.mock('../../../store', () => ({
+  useStores: jest.fn()
+}));
+
+jest.mock('../../../hooks', () => ({
+  useIsMobile: jest.fn()
+}));
+
+describe('NameTag', () => {
+  const mockOwnerPubkey = 'test-pubkey';
+  const defaultImageUrl = '/static/avatarPlaceholders/placeholder_1.jpg';
+  const mockGetUserAvatarPlaceholder = jest.fn().mockReturnValue(defaultImageUrl);
+
+  beforeEach(() => {
+    (StoreHooks.useStores as jest.Mock).mockReturnValue({
+      main: {
+        getUserAvatarPlaceholder: mockGetUserAvatarPlaceholder
+      },
+      ui: {
+        selectedPerson: null
+      }
+    });
+    (useIsMobile as jest.Mock).mockReset();
+  });
+
+  it('displays the default face image on desktop side', () => {
+    (useIsMobile as jest.Mock).mockReturnValue(false);
+
+    render(
+      <NameTag owner_pubkey={mockOwnerPubkey} owner_alias={''} img={''} id={0} widget={undefined} />
+    );
+
+    expect(mockGetUserAvatarPlaceholder).toHaveBeenCalledWith(mockOwnerPubkey);
+    const imageElement = screen.getByTestId('user-avatar');
+    expect(imageElement).toBeInTheDocument();
+  });
+
+  it('displays the default face image on mobile side', () => {
+    (useIsMobile as jest.Mock).mockReturnValue(true);
+
+    render(
+      <NameTag owner_pubkey={mockOwnerPubkey} owner_alias={''} img={''} id={0} widget={undefined} />
+    );
+
+    expect(mockGetUserAvatarPlaceholder).toHaveBeenCalledWith(mockOwnerPubkey);
+    const imageElement = screen.getByTestId('user-avatar');
+    expect(imageElement).toBeInTheDocument();
+  });
+});