chore: adds chain icon

Author: zone-live

app/components/Views/SocialLeaderboard/TraderProfileView/components/PositionRow.tsx

@@ -55,7 +55,7 @@ const PositionRow: React.FC<PositionRowProps> = ({ position, onPress }) => {
         gap={4}
         twClassName="flex-1 min-w-0 mr-3"
       >
-        <PositionTokenAvatar position={position} />
+        <PositionTokenAvatar position={position} showChainBadge />
 
         <Box twClassName="flex-1 min-w-0">
           <Text

app/components/Views/SocialLeaderboard/components/PositionTokenAvatar.test.tsx

@@ -7,6 +7,8 @@ import {
 import renderWithProvider from '../../../../util/test/renderWithProvider';
 import PositionTokenAvatar from './PositionTokenAvatar';
 import type { Position } from '@metamask/social-controllers';
+import BadgeWrapper from '../../../../component-library/components/Badges/BadgeWrapper';
+import BadgeNetwork from '../../../../component-library/components/Badges/Badge/variants/BadgeNetwork';
 
 jest.mock('@metamask/design-system-react-native', () => ({
   ...jest.requireActual('@metamask/design-system-react-native'),
@@ -26,7 +28,30 @@ jest.mock('../utils/chainMapping', () => ({
   ),
 }));
 
+jest.mock(
+  '../../../../component-library/components/Badges/BadgeWrapper',
+  () => ({
+    __esModule: true,
+    default: jest.fn(() => null),
+    BadgePosition: { BottomRight: 'bottom-right' },
+  }),
+);
+
+jest.mock(
+  '../../../../component-library/components/Badges/Badge/variants/BadgeNetwork',
+  () => ({
+    __esModule: true,
+    default: jest.fn(() => null),
+  }),
+);
+
+jest.mock('../../../../util/networks', () => ({
+  getNetworkImageSource: jest.fn(() => ({ uri: 'network.png' })),
+}));
+
 const MockAvatarToken = AvatarToken as jest.Mock;
+const MockBadgeWrapper = BadgeWrapper as jest.Mock;
+const MockBadgeNetwork = BadgeNetwork as jest.Mock;
 
 const lastAvatarTokenProps = () =>
   MockAvatarToken.mock.calls[MockAvatarToken.mock.calls.length - 1][0] as {
@@ -214,4 +239,40 @@ describe('PositionTokenAvatar', () => {
       uri: 'https://static.cx.metamask.io/eip155:8453.png',
     });
   });
+
+  describe('showChainBadge', () => {
+    it('wraps the avatar in BadgeWrapper when showChainBadge is true and the chain resolves', () => {
+      renderWithProvider(
+        <PositionTokenAvatar position={basePosition} showChainBadge />,
+      );
+
+      expect(MockBadgeWrapper).toHaveBeenCalled();
+    });
+
+    it('passes a BadgeNetwork as the badgeElement when showChainBadge is true', () => {
+      renderWithProvider(
+        <PositionTokenAvatar position={basePosition} showChainBadge />,
+      );
+
+      const badgeElement = MockBadgeWrapper.mock.calls[0][0]
+        .badgeElement as React.ReactElement;
+      expect(badgeElement.type).toBe(MockBadgeNetwork);
+    });
+
+    it('does not wrap the avatar in BadgeWrapper when showChainBadge is false by default', () => {
+      renderWithProvider(<PositionTokenAvatar position={basePosition} />);
+
+      expect(MockBadgeWrapper).not.toHaveBeenCalled();
+    });
+
+    it('does not wrap the avatar in BadgeWrapper when the chain is unsupported', () => {
+      const position = { ...basePosition, chain: 'unsupported' };
+
+      renderWithProvider(
+        <PositionTokenAvatar position={position} showChainBadge />,
+      );
+
+      expect(MockBadgeWrapper).not.toHaveBeenCalled();
+    });
+  });
 });

app/components/Views/SocialLeaderboard/components/PositionTokenAvatar.tsx

@@ -6,10 +6,16 @@ import {
 import type { Position } from '@metamask/social-controllers';
 import { getAssetImageUrl } from '../../../UI/Bridge/hooks/useAssetMetadata/utils';
 import { chainNameToId } from '../utils/chainMapping';
+import BadgeWrapper, {
+  BadgePosition,
+} from '../../../../component-library/components/Badges/BadgeWrapper';
+import BadgeNetwork from '../../../../component-library/components/Badges/Badge/variants/BadgeNetwork';
+import { getNetworkImageSource } from '../../../../util/networks';
 
 export interface PositionTokenAvatarProps {
   position: Position;
   size?: AvatarTokenSize;
+  showChainBadge?: boolean;
 }
 
 type ImageSource = 'clicker' | 'metamask' | 'none';
@@ -23,12 +29,17 @@ type ImageSource = 'clicker' | 'metamask' | 'none';
 const PositionTokenAvatar: React.FC<PositionTokenAvatarProps> = ({
   position,
   size = AvatarTokenSize.Lg,
+  showChainBadge = false,
 }) => {
+  const caipChainId = useMemo(
+    () => chainNameToId(position.chain),
+    [position.chain],
+  );
+
   const metamaskUrl = useMemo(() => {
-    const chainId = chainNameToId(position.chain);
-    if (!chainId) return undefined;
-    return getAssetImageUrl(position.tokenAddress, chainId);
-  }, [position.chain, position.tokenAddress]);
+    if (!caipChainId) return undefined;
+    return getAssetImageUrl(position.tokenAddress, caipChainId);
+  }, [caipChainId, position.tokenAddress]);
 
   const initialSource = useMemo((): ImageSource => {
     if (position.tokenImageUrl) return 'clicker';
@@ -64,7 +75,7 @@ const PositionTokenAvatar: React.FC<PositionTokenAvatarProps> = ({
     });
   };
 
-  return (
+  const avatar = (
     <AvatarToken
       name={position.tokenSymbol}
       src={src}
@@ -75,6 +86,24 @@ const PositionTokenAvatar: React.FC<PositionTokenAvatarProps> = ({
       }}
     />
   );
+
+  if (showChainBadge && caipChainId) {
+    return (
+      <BadgeWrapper
+        badgePosition={BadgePosition.BottomRight}
+        badgeElement={
+          <BadgeNetwork
+            name={position.chain}
+            imageSource={getNetworkImageSource({ chainId: caipChainId })}
+          />
+        }
+      >
+        {avatar}
+      </BadgeWrapper>
+    );
+  }
+
+  return avatar;
 };
 
 export default PositionTokenAvatar;