[DSR] Added Blockies

[brianacnguyen]

Description

This PR adds the Blockies component to DSR

Related issues

Fixes: #404

Manual testing steps

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

Screenshots/Recordings

Before

After

Screen.Recording.2025-03-05.at.10.41.42.AM.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

[socket-security]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/[email protected]	None	0	27.4 kB	bpierre

View full report↗︎

PR Overview

This PR introduces a new Blockies component to generate unique identicons based on an address, along with associated tests, types, and Storybook stories.

• Added Blockies component in its own file with dynamic import of the 'blo' module.
• Created tests to ensure proper rendering of the component with various props.
• Provided Storybook stories and type definitions to integrate the component into the design system.

Reviewed Changes

File	Description
packages/design-system-react/src/components/blockies/Blockies.test.tsx	Added tests to validate the Blockies component functionality.
packages/design-system-react/src/components/blockies/Blockies.tsx	Implemented the Blockies component with dynamic module import.
packages/design-system-react/src/components/blockies/Blockies.types.ts	Defined the type for Blockies props.
packages/design-system-react/src/components/blockies/index.ts	Exported the Blockies component and its types.
packages/design-system-react/src/components/blockies/Blockies.stories.tsx	Provided Storybook stories for the Blockies component.

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Comments suppressed due to low confidence (1)

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

• Consider adding error handling to the dynamic import (e.g., using a catch block) so the component can gracefully handle failure cases rather than silently returning null.

useEffect(() => { import('blo').then((module) =>