Use UserStore in ProfileCard Component

[KevinLatino]

Issue: Use UserStore in ProfileCard Component

📋 Description

Replace hardcoded user data in ProfileCard component with dynamic data from the userStore to display real user information.

🎯 Objective

• Display real user data instead of hardcoded values
• Integrate ProfileCard with existing userStore
• Improve data consistency across the application
• Follow best practices for state management

📍 File location

src/features/buyer/profile/components/ProfileCard.tsx

🔄 Current state

The ProfileCard currently uses hardcoded data:

• Name: "Matias Aguilar"
• Email: "xaguilar@gmail.com"

🔧 Required changes

• Import userStore hook
• Replace hardcoded name with dynamic user name
• Replace hardcoded email with dynamic user email
• Add fallback values for empty data
• Ensure proper TypeScript types

📝 Implementation details

Import statement:

import { useUser } from '@/shared/stores/userStore';

Hook usage:

const { name, email } = useUser();

Data replacement:

// Instead of:
<p>Matias Aguilar</p>
<p>xaguilar@gmail.com</p>

// Use:
<p>{name || 'User Name'}</p>
<p>{email || 'user@example.com'}</p>

✅ Acceptance criteria

• ProfileCard displays real user name from store
• ProfileCard displays real user email from store
• Fallback values shown when data is empty
• No TypeScript errors
• Component updates when user data changes
• Maintains existing styling and layout

🛠️ Technical considerations

• Use existing userStore from @/shared/stores/userStore
• Ensure proper error handling for missing data
• Maintain responsive design
• Follow existing component patterns

📝 Additional notes

• The userStore already has the necessary hooks: useUser()
• Store includes: name, email, walletAddress, role
• Component should be reactive to store changes
• Consider adding loading states if needed

🏷️ Labels

• bug
• buyer
• profile
• state-management
• refactor

[Benjtalkshow]

Hello @KevinLatino
Can this task be assigned to me? I can fix this issue. Thanks

[Tawab44]

I came across your issue in your repository, and I’m really interested in contributing to it. I’ve read through the issue and the contributing guidelines, and I believe I can help resolve it and Fix it. Can you assign this task to me?

[DANIELDKMC2]

I want to work on this issue

[benedictfred]

GM
Please can I work on this issue? I would get it done in 4hrs

[ksjayasankar]

Hi! I’m Jayasankar, a frontend dev experienced with React/Next.js, TypeScript, Zustand-style state management, and accessible UI.
I’ve already completed and opened a PR for another issue in this repo, so I’m familiar with the project structure, coding style, and contribution workflow.

Approach:

• Import useUser from @/shared/stores/userStore and destructure { name, email }.
• Replace hardcoded name/email in ProfileCard with store values, using safe fallbacks ('User Name', 'user@example.com').
• Ensure correct TS types and null/undefined guards for robustness.
• Keep the component reactive to store updates without unnecessary re-renders.
• Preserve current styling and responsive behavior.
• (Optional) Add a lightweight loading/empty state if store data is not yet populated.

ETA: 4–6 hours from assignment.
Once assigned, I’ll ping the maintainer on Telegram for coordination.

[pushkarm029]

Hey, I can complete this quickly. Thanks

Recommended by OnlyDust for exceptional experience, quality, and reliability.

[addegbenga]

I will like to work on this issue

[laryhills]

Hello,

✅ Plan: I’ll import the userStore hook into src/features/buyer/profile/components/ProfileCard.tsx, replace hardcoded name/email with store values, and add safe fallbacks (e.g., "—"). I’ll ensure proper TypeScript types, null/undefined guards, and memoize derived values to avoid unnecessary re-renders. I’ll also keep styling intact and add a light loading/empty state if the store hasn’t hydrated yet.

📌 Why Me: I’ve integrated app-wide stores across profile components before and can deliver a clean, type-safe refactor that improves consistency without UI regressions.

Recommended by OnlyDust for high-quality and dependable contributions.

[Josue19-08]

Hi, I’m Josué. I’d like to take this issue and refactor the ProfileCard to consume dynamic data from the userStore. I have experience working with React, TypeScript, and state management patterns, so I’ll ensure the component uses the useUser hook correctly, replaces the hardcoded values with store data, and provides proper fallback values for empty fields. The implementation will follow the existing component structure, maintain responsiveness, and handle reactivity to store updates without introducing TypeScript errors.

Recommended by OnlyDust for high-quality and dependable contributions.