[DSR] Added Blockies (#465)

<!--
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 `Blockies` component to DSR
<!--
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: #404 

## **Manual testing steps**

1. Run `yarn storybook` from root
2. Go to React Components > Blockies
3.

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

https://github.com/user-attachments/assets/4fedd8e0-eaa1-4f9c-9ffb-4087ba51010c

<!-- [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.

---------

Co-authored-by: georgewrmarshall <[email protected]>
Co-authored-by: George Marshall <[email protected]>

Author: brianacnguyen

packages/design-system-react-native/src/primitives/Blockies/Blockies.tsx

@@ -7,13 +7,13 @@ import { toDataUrl } from './Blockies.utilities';
 
 import type { BlockiesProps } from './Blockies.types';
 
-const Blockies = ({ address, size = 32, ...imageProps }: BlockiesProps) => {
+const Blockies = ({ address, size = 32, ...props }: BlockiesProps) => {
   return (
     <Image
       source={{ uri: toDataUrl(address) }}
       width={size}
       height={size}
-      {...imageProps}
+      {...props}
     />
   );
 };

packages/design-system-react/package.json

@@ -51,6 +51,7 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.0",
+    "blo": "^1.2.0",
     "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {

packages/design-system-react/src/components/blockies/Blockies.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Blockies } from './Blockies';
+import type { BlockiesProps } from './Blockies.types';
+import README from './README.mdx';
+
+const meta: Meta<BlockiesProps> = {
+  title: 'React Components/Blockies',
+  component: Blockies,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  args: {
+    address: '0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8',
+    size: 32,
+  },
+  argTypes: {
+    address: {
+      control: 'text',
+      description:
+        'Required address used as a unique identifier to generate the Blockies.',
+    },
+    size: {
+      control: 'number',
+      description: 'Optional prop to control the size of the Blockies.',
+    },
+    className: {
+      control: 'text',
+      description:
+        'Optional prop for additional CSS classes to be applied to the Blockies component.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<BlockiesProps>;
+
+const sampleAccountAddresses = [
+  '0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8',
+  '0xb9b81f6bd23B953c5257C3b5E2F0c03B07E944eB',
+  '0x360507dfEC4Bf0c03495f91154A78C672599F308',
+  '0x50cA820Ff810F7687E7d0aDb23A830e3ac6032C3',
+  '0x840C9Eb73729E626673714D6E4dA8afc8Ccc90d3',
+  '0xCA0361BE89B7d47a6233d1875F0727ddeAB23377',
+  '0xD78CBcA88eCd65c6128511e46a518CDc6c66fC74',
+  '0xCFc8b1d1031ef2ecce3a98d5D79ce4D75Edb06bA',
+  '0xDe53fa2E659b6134991bB56F64B691990e5C44E7',
+  '0x8AceA3A9748294d1B5C25a08EFE37b756AafDFdd',
+  '0xEC5CE72f2e18B0017C88F7B12d3308119C5Cf129',
+  '0xeC56Da21c90Af6b50E4Ba5ec252bD97e735290fc',
+];
+
+export const Default: Story = {};
+
+export const Address: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      {sampleAccountAddresses.map((address) => (
+        <Blockies key={address} address={address} size={32} />
+      ))}
+    </div>
+  ),
+};
+
+export const Size: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Blockies address={sampleAccountAddresses[0]} size={16} />
+      <Blockies address={sampleAccountAddresses[1]} size={24} />
+      <Blockies address={sampleAccountAddresses[2]} size={32} />
+      <Blockies address={sampleAccountAddresses[3]} size={48} />
+      <Blockies address={sampleAccountAddresses[4]} size={64} />
+    </div>
+  ),
+};

packages/design-system-react/src/components/blockies/Blockies.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { Blockies } from './Blockies';
+
+// Mock the 'blo' module to return a predictable output for testing.
+jest.mock('blo', () => ({
+  blo: (address: string) => `generated_${address}`,
+}));
+
+describe('Blockies', () => {
+  const address = '0x1234567890abcdef';
+
+  it('renders an img element with the correct src, height, and width', async () => {
+    render(
+      <Blockies
+        address={address}
+        size={48}
+        data-testid="blockies"
+        alt="Blockies Avatar"
+      />,
+    );
+
+    // Wait for the image to be rendered after the dynamic import resolves.
+    const img = await waitFor(() => screen.getByTestId('blockies'));
+
+    expect(img.tagName).toBe('IMG');
+    expect(img).toHaveAttribute('src', `generated_${address}`);
+    expect(img).toHaveAttribute('height', '48');
+    expect(img).toHaveAttribute('width', '48');
+    expect(img).toHaveAttribute('alt', 'Blockies Avatar');
+  });
+
+  it('applies the default size of 32 when no size prop is provided', async () => {
+    render(<Blockies address={address} data-testid="blockies" />);
+
+    const img = await waitFor(() => screen.getByTestId('blockies'));
+
+    expect(img).toHaveAttribute('height', '32');
+    expect(img).toHaveAttribute('width', '32');
+  });
+
+  it('spreads additional image props to the img element', async () => {
+    render(
+      <Blockies
+        address={address}
+        data-testid="blockies"
+        title="Blockies Title"
+      />,
+    );
+
+    const img = await waitFor(() => screen.getByTestId('blockies'));
+
+    expect(img).toHaveAttribute('title', 'Blockies Title');
+  });
+
+  it('applies default alt text when no alt prop is provided', async () => {
+    render(<Blockies address={address} data-testid="blockies" />);
+
+    const img = await waitFor(() => screen.getByTestId('blockies'));
+
+    expect(img).toHaveAttribute('alt', `Blockies for ${address}`);
+  });
+});

packages/design-system-react/src/components/blockies/Blockies.tsx

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import type { BlockiesProps } from './Blockies.types';
+
+export const Blockies = ({ address, size = 32, ...props }: BlockiesProps) => {
+  const [bloModule, setBloModule] = useState<{
+    blo: (address: string) => string;
+  } | null>(null);
+
+  useEffect(() => {
+    import('blo').then((module) =>
+      setBloModule(module as { blo: (address: string) => string }),
+    );
+  }, []);
+
+  if (!bloModule) {
+    return null;
+  }
+
+  return (
+    <img
+      src={bloModule.blo(address)}
+      height={size}
+      width={size}
+      alt={`Blockies for ${address}`} // TODO: Add localization for this
+      {...props}
+    />
+  );
+};
+
+Blockies.displayName = 'Blockies';

packages/design-system-react/src/components/blockies/Blockies.types.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+
+export type BlockiesProps = ComponentProps<'img'> & {
+  /**
+   * Required address used as a unique identifier to generate the Blockies.
+   */
+  address: string;
+  /**
+   * Optional prop to control the size of the Blockies.
+   */
+  size?: number;
+};

packages/design-system-react/src/components/blockies/README.mdx

@@ -0,0 +1,87 @@
+import { Controls, Canvas } from '@storybook/blocks';
+import * as BlockiesStories from './Blockies.stories';
+
+# Blockies
+
+The **Blockies** component generates a unique, blocky avatar image based on a provided address.
+
+```tsx
+import { Blockies } from '@metamask/design-system-react';
+
+<Blockies address="0x1234567890abcdef1234567890abcdef12345678" />;
+```
+
+<Canvas of={BlockiesStories.Default} />
+
+## Props
+
+### Address
+
+The `address` prop is required and used as a unique identifier to generate the Blockies image. Each address will generate a unique, deterministic pattern.
+
+<Canvas of={BlockiesStories.Address} />
+
+### Size
+
+The `size` prop controls the dimensions (both height and width) of the Blockies image in pixels. The default size is 32px.
+
+<Canvas of={BlockiesStories.Size} />
+
+### Accessibility
+
+The `alt` attribute provides alternative text for screen readers. By default, it includes the address for context (`Blockies for {address}`). You can override this with custom alt text:
+
+#### Default alt text
+
+```tsx
+// Default alt text
+<Blockies address="0x1234567890abcdef" />
+```
+
+```html
+<!-- Renders: -->
+<img alt="Blockies for 0x1234567890abcdef" />
+```
+
+#### Custom alt text
+
+```tsx
+// Custom alt text
+<Blockies address="0x1234567890abcdef" alt="User avatar for John Doe" />
+```
+
+```html
+<!-- Renders: -->
+<img alt="User avatar for John Doe" />
+```
+
+### Class Name
+
+Use the `className` prop to add custom CSS classes to the component. These classes will be merged with the component's default classes using `twMerge`, allowing you to:
+
+- Add new styles that don't exist in the default component
+- Override the component's default styles when needed (Blockies has no default styles)
+
+Example:
+
+```tsx
+// Adding new styles
+<Blockies
+  address="0x1234567890abcdef1234567890abcdef12345678"
+  className="my-4 mx-2"
+/>
+```
+
+Note: When using `className` to override default styles, the custom classes will take precedence over the component's default classes.
+
+### Style
+
+The `style` prop should primarily be used for dynamic inline styles that cannot be achieved with className alone. For static styles, prefer using className with Tailwind classes.
+
+## Component API
+
+<Controls of={BlockiesStories.Default} />
+
+## References
+
+[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940)

packages/design-system-react/src/components/blockies/index.ts

@@ -0,0 +1,2 @@
+export { Blockies } from './Blockies';
+export type { BlockiesProps } from './Blockies.types';

packages/design-system-react/tsconfig.build.json

@@ -6,7 +6,8 @@
     "rootDir": "./src",
     "jsx": "react",
     "types": ["react"],
-    "lib": ["ES2020", "DOM"]
+    "lib": ["ES2020", "DOM"],
+    "skipLibCheck": true // TODO: Remove this once we have a proper type definition for the blo module for blockies
   },
   "references": [],
   "include": ["./src"]

yarn.lock

@@ -3236,6 +3236,7 @@ __metadata:
     "@types/node": "npm:^16.18.54"
     "@types/react": "npm:^18.2.0"
     "@types/react-dom": "npm:^18.2.0"
+    blo: "npm:^1.2.0"
     deepmerge: "npm:^4.2.2"
     jest: "npm:^29.7.0"
     jest-environment-jsdom: "npm:^29.7.0"
@@ -7439,6 +7440,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"blo@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "blo@npm:1.2.0"
+  checksum: 10/17ec61e41b201bbba8ab3c874cad94696604b6ac4029de5050c92ea5817dff6814d8642b9b2948e0d6804194437b751fa2755652201f26fa5d606913c489b757
+  languageName: node
+  linkType: hard
+
 "bluebird@npm:^3.5.5":
   version: 3.7.2
   resolution: "bluebird@npm:3.7.2"