[DSRN] Added AvatarGroup (#462)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
This PR adds the `AvatarGroup` component to the DSRN
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Related issues**

Fixes: #371 

## **Manual testing steps**

1. Run `yarn storybook:ios` from root
2. Go to Components > AvatarGroup
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**
Added more sample stories to different Avatar variants

https://github.com/user-attachments/assets/9620df1f-0299-42b4-b347-75482318e65e

AvatarGroup stories

https://github.com/user-attachments/assets/f0662a4c-0d0d-4fef-beb2-a9a423eb5127

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: brianacnguyen

apps/storybook-react-native/.storybook/storybook.requires.js

@@ -49,6 +49,7 @@ const getStories = () => {
   return {
     "./../../packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.stories.tsx": require("../../../packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.stories.tsx"),
     "./../../packages/design-system-react-native/src/components/AvatarFavicon/AvatarFavicon.stories.tsx": require("../../../packages/design-system-react-native/src/components/AvatarFavicon/AvatarFavicon.stories.tsx"),
+    "./../../packages/design-system-react-native/src/components/AvatarGroup/AvatarGroup.stories.tsx": require("../../../packages/design-system-react-native/src/components/AvatarGroup/AvatarGroup.stories.tsx"),
     "./../../packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.stories.tsx": require("../../../packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.stories.tsx"),
     "./../../packages/design-system-react-native/src/components/AvatarNetwork/AvatarNetwork.stories.tsx": require("../../../packages/design-system-react-native/src/components/AvatarNetwork/AvatarNetwork.stories.tsx"),
     "./../../packages/design-system-react-native/src/components/AvatarToken/AvatarToken.stories.tsx": require("../../../packages/design-system-react-native/src/components/AvatarToken/AvatarToken.stories.tsx"),

packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.constants.ts

@@ -10,3 +10,19 @@ export const DEFAULT_AVATARACCOUNT_PROPS: Required<
   shape: AvatarBaseShape.Circle,
   variant: AvatarAccountVariant.Jazzicon,
 };
+
+// Sample account addresses
+export const SAMPLE_AVATARACCOUNT_ADDRESSES = [
+  '0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8',
+  '0xb9b81f6bd23B953c5257C3b5E2F0c03B07E944eB',
+  '0x360507dfEC4Bf0c03495f91154A78C672599F308',
+  '0x50cA820Ff810F7687E7d0aDb23A830e3ac6032C3',
+  '0x840C9Eb73729E626673714D6E4dA8afc8Ccc90d3',
+  '0xCA0361BE89B7d47a6233d1875F0727ddeAB23377',
+  '0xD78CBcA88eCd65c6128511e46a518CDc6c66fC74',
+  '0xCFc8b1d1031ef2ecce3a98d5D79ce4D75Edb06bA',
+  '0xDe53fa2E659b6134991bB56F64B691990e5C44E7',
+  '0x8AceA3A9748294d1B5C25a08EFE37b756AafDFdd',
+  '0xEC5CE72f2e18B0017C88F7B12d3308119C5Cf129',
+  '0xeC56Da21c90Af6b50E4Ba5ec252bD97e735290fc',
+];

packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.stories.tsx

@@ -2,10 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
 import AvatarAccount from './AvatarAccount';
-import { DEFAULT_AVATARACCOUNT_PROPS } from './AvatarAccount.constants';
+import {
+  DEFAULT_AVATARACCOUNT_PROPS,
+  SAMPLE_AVATARACCOUNT_ADDRESSES,
+} from './AvatarAccount.constants';
 import type { AvatarAccountProps } from './AvatarAccount.types';
 import { AvatarSize } from '../../shared/enums';
-import { IconName } from '../Icon';
 import { AvatarAccountVariant } from './AvatarAccount.types';
 
 const meta: Meta<AvatarAccountProps> = {
@@ -29,28 +31,16 @@ const meta: Meta<AvatarAccountProps> = {
 export default meta;
 
 type Story = StoryObj<AvatarAccountProps>;
-const sampleAccountAddresses = [
-  '0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8',
-  '0xb9b81f6bd23B953c5257C3b5E2F0c03B07E944eB',
-  '0x360507dfEC4Bf0c03495f91154A78C672599F308',
-  '0x50cA820Ff810F7687E7d0aDb23A830e3ac6032C3',
-  '0x840C9Eb73729E626673714D6E4dA8afc8Ccc90d3',
-  '0xCA0361BE89B7d47a6233d1875F0727ddeAB23377',
-  '0xD78CBcA88eCd65c6128511e46a518CDc6c66fC74',
-  '0xCFc8b1d1031ef2ecce3a98d5D79ce4D75Edb06bA',
-  '0xDe53fa2E659b6134991bB56F64B691990e5C44E7',
-  '0x8AceA3A9748294d1B5C25a08EFE37b756AafDFdd',
-  '0xEC5CE72f2e18B0017C88F7B12d3308119C5Cf129',
-  '0xeC56Da21c90Af6b50E4Ba5ec252bD97e735290fc',
-];
 export const Default: Story = {
   args: {
     size: DEFAULT_AVATARACCOUNT_PROPS.size,
     variant: DEFAULT_AVATARACCOUNT_PROPS.variant,
     twClassName: '',
   },
   render: (args) => {
-    return <AvatarAccount {...args} address={sampleAccountAddresses[0]} />;
+    return (
+      <AvatarAccount {...args} address={SAMPLE_AVATARACCOUNT_ADDRESSES[0]} />
+    );
   },
 };
 
@@ -62,12 +52,12 @@ export const Sizes: Story = {
           <AvatarAccount
             size={AvatarSize[sizeKey as keyof typeof AvatarSize]}
             variant={AvatarAccountVariant.Blockies}
-            address={sampleAccountAddresses[0]}
+            address={SAMPLE_AVATARACCOUNT_ADDRESSES[0]}
           />
           <AvatarAccount
             size={AvatarSize[sizeKey as keyof typeof AvatarSize]}
             variant={AvatarAccountVariant.Jazzicon}
-            address={sampleAccountAddresses[0]}
+            address={SAMPLE_AVATARACCOUNT_ADDRESSES[0]}
           />
         </View>
       ))}
@@ -86,7 +76,7 @@ export const Variants: Story = {
               variantKey as keyof typeof AvatarAccountVariant
             ]
           }
-          address={sampleAccountAddresses[0]}
+          address={SAMPLE_AVATARACCOUNT_ADDRESSES[0]}
         />
       ))}
     </View>
@@ -96,7 +86,7 @@ export const Variants: Story = {
 export const SampleAddresses: Story = {
   render: () => (
     <View style={{ gap: 16 }}>
-      {sampleAccountAddresses.map((address) => (
+      {SAMPLE_AVATARACCOUNT_ADDRESSES.map((address) => (
         <View key={address} style={{ flexDirection: 'row', gap: 8 }}>
           <AvatarAccount
             variant={AvatarAccountVariant.Blockies}

packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.test.tsx

@@ -5,11 +5,14 @@ import { render } from '@testing-library/react-native';
 import { AvatarAccountSize } from '../../shared/enums';
 import AvatarAccount from './AvatarAccount';
 import { AvatarAccountVariant } from './AvatarAccount.types';
-import { DEFAULT_AVATARACCOUNT_PROPS } from './AvatarAccount.constants';
+import {
+  DEFAULT_AVATARACCOUNT_PROPS,
+  SAMPLE_AVATARACCOUNT_ADDRESSES,
+} from './AvatarAccount.constants';
 
 describe('AvatarAccount', () => {
   it('renders Jazzicon by default when no variant is provided', () => {
-    const address = '0x12345';
+    const address = SAMPLE_AVATARACCOUNT_ADDRESSES[0];
 
     const { getByTestId, queryByTestId } = render(
       <AvatarAccount address={address} />,
@@ -20,7 +23,7 @@ describe('AvatarAccount', () => {
   });
 
   it('renders Blockies when variant is blockies', () => {
-    const address = '0xabcdef';
+    const address = SAMPLE_AVATARACCOUNT_ADDRESSES[0];
 
     const { getByTestId, queryByTestId } = render(
       <AvatarAccount
@@ -34,7 +37,7 @@ describe('AvatarAccount', () => {
   });
 
   it('respects the default size and shape', () => {
-    const address = '0xlmnop';
+    const address = SAMPLE_AVATARACCOUNT_ADDRESSES[0];
     const { getByTestId } = render(
       <AvatarAccount address={address} testID="avatar-account" />,
     );
@@ -49,7 +52,7 @@ describe('AvatarAccount', () => {
   });
 
   it('overrides the size if provided', () => {
-    const address = '0x999999';
+    const address = SAMPLE_AVATARACCOUNT_ADDRESSES[0];
     const { getByTestId } = render(
       <AvatarAccount
         address={address}
@@ -71,7 +74,7 @@ describe('AvatarAccount', () => {
   });
 
   it('passes additional props to AvatarBase', () => {
-    const address = '0x67890';
+    const address = SAMPLE_AVATARACCOUNT_ADDRESSES[0];
     const customStyle = { margin: 10 };
     const { getByTestId } = render(
       <AvatarAccount

packages/design-system-react-native/src/components/AvatarFavicon/AvatarFavicon.constants.ts

@@ -10,3 +10,14 @@ export const DEFAULT_AVATARFAVICON_PROPS: Required<
   width: '100%',
   height: '100%',
 };
+
+// Sample Favicon URIs
+export const SAMPLE_AVATARFAVICON_URIS = [
+  'https://metamask.github.io/test-dapp/metamask-fox.svg',
+  'https://www.coinbase.com/favicon.ico',
+  'https://www.myetherwallet.com/favicon.ico',
+  'https://www.blockchain.com/static/favicon.ico',
+  'https://trezor.io/favicon.ico',
+  'https://electrum.org/favicon.ico',
+  'https://cryptologos.cc/logos/ethereum-eth-logo.svg',
+];

packages/design-system-react-native/src/components/AvatarFavicon/AvatarFavicon.stories.tsx

@@ -2,7 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react-native';
 import { ImageSourcePropType, View } from 'react-native';
 
 import AvatarFavicon from './AvatarFavicon';
-import { DEFAULT_AVATARFAVICON_PROPS } from './AvatarFavicon.constants';
+import {
+  DEFAULT_AVATARFAVICON_PROPS,
+  SAMPLE_AVATARFAVICON_URIS,
+} from './AvatarFavicon.constants';
 import type { AvatarFaviconProps } from './AvatarFavicon.types';
 import { AvatarSize } from '../../shared/enums';
 
@@ -24,7 +27,7 @@ export default meta;
 
 type Story = StoryObj<AvatarFaviconProps>;
 const storyImageSource: ImageSourcePropType = {
-  uri: 'https://metamask.github.io/test-dapp/metamask-fox.svg',
+  uri: SAMPLE_AVATARFAVICON_URIS[0],
 };
 
 export const Default: Story = {
@@ -48,3 +51,18 @@ export const Sizes: Story = {
     </View>
   ),
 };
+
+export const SampleFavicons: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      {SAMPLE_AVATARFAVICON_URIS.map((faviconUri) => (
+        <AvatarFavicon
+          src={{
+            uri: faviconUri,
+          }}
+          key={faviconUri}
+        />
+      ))}
+    </View>
+  ),
+};

packages/design-system-react-native/src/components/AvatarFavicon/AvatarFavicon.test.tsx

@@ -53,7 +53,7 @@ describe('AvatarFavicon Component', () => {
 
     const avatarBase = getByTestId('avatar-base');
 
-    expect(avatarBase.props.children.props.children).toStrictEqual(fallback);
+    expect(avatarBase.props.children[1].props.children).toStrictEqual(fallback);
   });
 
   it('updates fallback text on svg error when fallbackText is provided', () => {
@@ -76,7 +76,7 @@ describe('AvatarFavicon Component', () => {
     expect(onSvgErrorMock).toHaveBeenCalledTimes(1);
     expect(onSvgErrorMock).toHaveBeenCalledWith(errorEvent);
     const avatarBase = getByTestId('avatar-base');
-    expect(avatarBase.props.children.props.children).toStrictEqual(fallback);
+    expect(avatarBase.props.children[1].props.children).toStrictEqual(fallback);
   });
 
   it('computes backupFallbackText from name when fallbackText is not provided', () => {
@@ -96,7 +96,7 @@ describe('AvatarFavicon Component', () => {
     fireEvent(imageOrSvg, 'onImageError', errorEvent);
 
     const avatarBase = getByTestId('avatar-base');
-    expect(avatarBase.props.children.props.children).toStrictEqual('E');
+    expect(avatarBase.props.children[1].props.children).toStrictEqual('E');
   });
 
   it('passes additional AvatarBase props correctly', () => {

packages/design-system-react-native/src/components/AvatarFavicon/AvatarFavicon.tsx

@@ -12,6 +12,8 @@ const AvatarFavicon = ({
   shape = DEFAULT_AVATARFAVICON_PROPS.shape,
   fallbackText,
   fallbackTextProps,
+  hasBorder,
+  hasSolidBackgroundColor,
   twClassName,
   testID,
   style,
@@ -45,6 +47,8 @@ const AvatarFavicon = ({
       fallbackText={finalFallbackText}
       fallbackTextProps={fallbackTextProps}
       twClassName={twClassName}
+      hasBorder={hasBorder}
+      hasSolidBackgroundColor={hasSolidBackgroundColor}
       testID={testID}
       style={style}
     >