avatar component for user profile

[FrankiePower]

Pull Request: Replace Blockies with DiceBear Avatar Generation

Context

The current implementation uses Blockies for generating user avatars from Ethereum addresses. This PR replaces it with DiceBear, a more modern and customizable avatar generation library, while maintaining all existing functionality and adding proper fallback mechanisms.

---

Changes

1. New Avatar Component:

   • Creates a new Avatar component using DiceBear
   • Implements loading and error states
   • Maintains existing styling and dimensions
   • Adds proper accessibility attributes

2. PageHeader Updates:

   • Replaces Blockies implementation with new Avatar component
   • Maintains all existing functionality
   • Updates TypeScript types and props

---

Requirements

1. Avatar Generation:

   • Generate consistent avatars based on Ethereum addresses
   • Maintain visual consistency across sessions
   • Handle loading and error states gracefully

2. Integration:

   • Seamless integration with existing components
   • Maintain current styling and dimensions
   • Ensure proper client-side rendering

---

Acceptance Criteria

1. Avatar Display:

   • Avatars are generated consistently for the same address
   • Loading states show appropriate fallback
   • Error states show appropriate fallback
   • Styling matches existing design (32x32px, rounded)

2. Performance:

   • Avatar generation is performant
   • No unnecessary re-renders
   • Proper client-side only rendering

---

Related Files

1. components/Avatar.tsx:

   • New Avatar component implementation
   • DiceBear integration
   • Fallback mechanisms

2. components/PageHeader.tsx:

   • Updated to use new Avatar component
   • Maintained existing functionality

---

Checklist

• Create new Avatar component
• Update PageHeader implementation
• Implement fallback mechanisms
• Ensure proper client-side rendering
• Add proper TypeScript types
• Document all changes

[vercel]

@FrankiePower is attempting to deploy a commit to the CofiBlocks Team on Vercel.

A member of the Team first needs to authorize it.

[FrankiePower]

@evgongora hello chief. i sent you a dm on telegram. i need some help setting up my dev environment, so i can test some changes and finish this PR

[evgongora]

Hey @FrankiePower how's this going?

[FrankiePower]

i am almost done with it. just testing. i ran into some issues with my machine which will be resolved tomorrow. i will make a push and open up this PR for review. i apologize for the delay.

[FrankiePower]

also do you like it?

[FrankiePower]

@brolag @evgongora @Ranulfo17 @muguika @rvalenciano can someone please go over this PR?