[DSR]: Add badge support to AvatarAccount

### **Description**

Upgrade the `AvatarAccount` component to support display of `BadgeNetwork` and `BadgeStatus`, reflecting the connected network and account connection status.

This aligns with recent UI audits and design enhancements aimed at improving user awareness of account/network state directly from the avatar.

### **Technical Details**

- Integrate `BadgeNetwork` and `BadgeStatus` components within `AvatarAccount`
- Ensure responsiveness and proper alignment within various container sizes
- Leverage props to conditionally render badges based on connection and network state
- Follow design references to apply visual styling, badge positioning, and sizing

### **Acceptance Criteria**

- `AvatarAccount` renders network and status badges based on current connection state
- UI matches Figma designs
- Component remains backwards-compatible (e.g., no badges if props not supplied)
- Responsive behavior verified across screen sizes
- Design QA passes (e.g., audit spacing, size, color, etc.)

### **References**

- Audit & Insight Report – Figma Board: https://www.figma.com/board/pQa2vI7r08pHiqsAPTWdQ8/Avatar%2C-Token%2C-Network%2C-Icon%2C-Badge-Audit-and-Insight-Report?node-id=0-1&t=0EWeZ4yjDqhzZril-1
- WIP Shared UI Components – Figma Design:https://www.figma.com/design/1D6tnzXqWgnUC3spaAOELN/%F0%9F%A6%8A%5BWIP%5D-DS-Components-(Shared-UI-lib)?node-id=120-1621&t=E6652Uk8pwcj6f2f-1

Start with the AvatarAccount component and inspect the existing BadgeNetwork and BadgeStatus components, then review the linked Figma audit and design references. Implement conditional badges while preserving the no-badge behavior, and verify responsive alignment, sizing, spacing, colors, and design QA across screen sizes.

Written by the indexing model from the issue text.