[DSRN]: 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 by locating the AvatarAccount, BadgeNetwork, and BadgeStatus components in the TypeScript project and review how their props and layout currently work. Use the linked Figma audit and shared UI designs to determine badge positioning, sizing, spacing, and responsive behavior. Done means optional badges render for the relevant connection and network states while existing AvatarAccount usage remains unchanged.

Written by the indexing model from the issue text.