fix: replace User icon with Avatar component in ListingCard#34
fix: replace User icon with Avatar component in ListingCard#34dannyy2000 wants to merge 2 commits intoPACTO-LAT:developfrom
Conversation
- Replace lucide-react User icon with Radix UI Avatar component - Add AvatarImage for profile pictures and AvatarFallback for initials - Add sellerName, buyerName, sellerAvatarUrl, buyerAvatarUrl fields to MarketplaceListing type - Update mock data with new avatar fields - Maintain glassmorphism styling on avatar fallback closes PACTO-LAT#28
|
@dannyy2000 is attempting to deploy a commit to the Trustless Work Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughReplaces the static User icon in ListingCard with an Avatar component rendering seller or buyer avatar (with initials fallback). Adds seller/buyer name and avatar URL fields to types and mock data to support the UI change. No public function signatures were modified. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@apps/web/components/marketplace/ListingCard.tsx`:
- Around line 63-69: The AvatarImage component is missing alt text; update the
AvatarImage usage in ListingCard.tsx to pass an appropriate alt prop (e.g.,
alt={`Seller avatar for ${listing.sellerName}`} when listing.type === 'sell' and
alt={`Buyer avatar for ${listing.buyerName}`} when not) so screen readers get
context, using listing.sellerAvatarUrl/listing.buyerAvatarUrl and the
listing.sellerName/listing.buyerName fields (or another suitable name/identifier
on listing) as the alt content.
In `@apps/web/lib/mock-data.ts`:
- Around line 69-70: The mock objects contain sellerAvatarUrl and buyerAvatarUrl
set to empty strings which cause needless image requests; remove those
properties from the mock objects (or set them to undefined/null) in
apps/web/lib/mock-data.ts so absence represents “no avatar” and falls back to
the UI default, and if necessary update the related type/interface or make the
fields optional where referenced (e.g., where sellerAvatarUrl and buyerAvatarUrl
are consumed) so the code compiles and handles missing avatars cleanly.
In `@apps/web/lib/types.ts`:
- Around line 128-131: Remove the dead MarketplaceListing and Listing
definitions from apps/web/lib/types.ts and instead move the active
MarketplaceListing definition (the one in apps/web/lib/types/marketplace.ts that
uses id as string and includes minAmount, maxAmount, and terms) into the shared
package `@pacto-p2p/types`; then update all modules that import
MarketplaceListing/Listing to import from `@pacto-p2p/types` and delete the
now-unused local types and the old marketplace.ts copy to avoid duplication.
Ensure you reference the exact type name MarketplaceListing (and Listing if
still needed) when relocating and update import statements across the codebase
to point to `@pacto-p2p/types`.
| sellerName?: string; | ||
| buyerName?: string; | ||
| sellerAvatarUrl?: string; | ||
| buyerAvatarUrl?: string; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find all type definitions related to Listing/MarketplaceListing in the types package
find . -path "*/packages/types/*" -name "*.ts" -type f | head -20Repository: PACTO-LAT/pacto-p2p
Length of output: 123
🏁 Script executed:
# Check if MarketplaceListing or Listing types exist in the shared types package
rg -n "(export\s+(interface|type)\s+(MarketplaceListing|Listing))" packages/typesRepository: PACTO-LAT/pacto-p2p
Length of output: 45
🏁 Script executed:
# Read the specific lines in apps/web/lib/types.ts
head -170 apps/web/lib/types.ts | tail -50Repository: PACTO-LAT/pacto-p2p
Length of output: 1132
🏁 Script executed:
# Check what types are being imported from `@pacto-p2p/types` in apps/web/lib/types.ts
rg "from '@pacto-p2p/types'" apps/web/lib/types.ts -A 2 -B 2Repository: PACTO-LAT/pacto-p2p
Length of output: 45
🏁 Script executed:
# Check what's exported from `@pacto-p2p/types` index
cat packages/types/src/index.tsRepository: PACTO-LAT/pacto-p2p
Length of output: 119
🏁 Script executed:
# Get the full context of DashboardListing and Listing type definitions in apps/web/lib/types.ts
cat -n apps/web/lib/types.ts | sed -n '110,180p'Repository: PACTO-LAT/pacto-p2p
Length of output: 1815
🏁 Script executed:
# Check if there are other files in the types package
ls -la packages/types/src/Repository: PACTO-LAT/pacto-p2p
Length of output: 286
🏁 Script executed:
# Search across the codebase to see if Listing or MarketplaceListing types are used/imported elsewhere
rg "type Listing|interface Listing" -g '*.ts' -g '*.tsx'Repository: PACTO-LAT/pacto-p2p
Length of output: 506
🏁 Script executed:
# Check if MarketplaceListing is used elsewhere in the codebase
rg "MarketplaceListing" -g '*.ts' -g '*.tsx' -nRepository: PACTO-LAT/pacto-p2p
Length of output: 2623
🏁 Script executed:
# Check if Listing type is used elsewhere in the codebase
rg "\bListing\b" apps/web -g '*.ts' -g '*.tsx' -n | grep -E "(import|type Listing|interface)" | head -20Repository: PACTO-LAT/pacto-p2p
Length of output: 112
🏁 Script executed:
# Check the Escrow.ts to understand what's currently in shared types
cat packages/types/src/Escrow.tsRepository: PACTO-LAT/pacto-p2p
Length of output: 818
🏁 Script executed:
# Check if MarketplaceListing from apps/web/lib/types.ts is imported anywhere
rg "from.*['\"].*lib/types['\"]" apps/web -g '*.ts' -g '*.tsx' | head -20Repository: PACTO-LAT/pacto-p2p
Length of output: 1733
🏁 Script executed:
# Check the marketplace.ts file to see if it duplicates MarketplaceListing
cat apps/web/lib/types/marketplace.tsRepository: PACTO-LAT/pacto-p2p
Length of output: 898
🏁 Script executed:
# Verify which MarketplaceListing definition is being used by checking all imports
rg "import.*MarketplaceListing" apps/web -g '*.ts' -g '*.tsx'Repository: PACTO-LAT/pacto-p2p
Length of output: 829
🏁 Script executed:
# Verify the id field types in both definitions to check for conflicts
rg "id.*:" apps/web/lib/types.ts -A 1 | grep -A 1 "MarketplaceListing\|Listing" | head -15Repository: PACTO-LAT/pacto-p2p
Length of output: 45
🏁 Script executed:
# Check if the unused MarketplaceListing/Listing from types.ts are re-exported anywhere
rg "export.*from.*types\.ts\|export.*MarketplaceListing\|export.*Listing" apps/web/lib -g '*.ts'Repository: PACTO-LAT/pacto-p2p
Length of output: 45
🏁 Script executed:
# Double-check by looking for any direct imports from types.ts for MarketplaceListing or Listing
rg "from.*['\"]@/lib/types['\"]|from.*['\"]@/lib/types\.ts['\"]" apps/web -g '*.ts' -g '*.tsx' | grep -v "marketplace\|db\|admin"Repository: PACTO-LAT/pacto-p2p
Length of output: 1510
🏁 Script executed:
# Verify the complete context of both type definitions to confirm they're truly duplicates
echo "=== MarketplaceListing in types.ts ===" && sed -n '118,137p' apps/web/lib/types.ts && echo -e "\n=== Listing in types.ts ===" && sed -n '154,172p' apps/web/lib/types.tsRepository: PACTO-LAT/pacto-p2p
Length of output: 940
Remove these unused type definitions and consolidate listing types to shared package.
The MarketplaceListing and Listing definitions in apps/web/lib/types.ts (lines 128–131 and 164–167) are dead code—they're never imported anywhere. The codebase actively uses MarketplaceListing from apps/web/lib/types/marketplace.ts, which has a different schema (id is a string; includes minAmount, maxAmount, and terms fields).
Move the active definition from marketplace.ts to @pacto-p2p/types and update all imports accordingly, per the guideline: "Use shared types from @pacto-p2p/types when possible."
🤖 Prompt for AI Agents
In `@apps/web/lib/types.ts` around lines 128 - 131, Remove the dead
MarketplaceListing and Listing definitions from apps/web/lib/types.ts and
instead move the active MarketplaceListing definition (the one in
apps/web/lib/types/marketplace.ts that uses id as string and includes minAmount,
maxAmount, and terms) into the shared package `@pacto-p2p/types`; then update all
modules that import MarketplaceListing/Listing to import from `@pacto-p2p/types`
and delete the now-unused local types and the old marketplace.ts copy to avoid
duplication. Ensure you reference the exact type name MarketplaceListing (and
Listing if still needed) when relocating and update import statements across the
codebase to point to `@pacto-p2p/types`.
There was a problem hiding this comment.
The type consolidation is a valid suggestion but out of scope for this PR. The types in lib/types.ts are used by mock-data.ts
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check what types are imported in mock-data.ts and from where
head -20 apps/web/lib/mock-data.ts | grep -E "import|from"
Length of output: 35
🏁 Script executed:
#!/bin/bash
# Check the full import statement and verify which types from lib/types.ts are actually used in mock-data.ts
head -30 apps/web/lib/mock-data.ts
Length of output: 507
@dannyy2000, you're absolutely right—I can confirm that mock-data.ts does import MarketplaceListing from @/lib/types. Thank you for the clarification. I understand this consolidation is out of scope for this PR, and I respect that decision. The current changes for avatar support are working as intended.
🧬 Code Graph Analysis Results
Filename: apps/web/lib/types/marketplace.ts
Lines: 1-26
Content:
export interface MarketplaceListing {
id: string;
type: 'sell' | 'buy';
token: string;
amount: number;
rate: number;
fiatCurrency: string;
paymentMethod: string;
seller: string;
buyer: string;
sellerName?: string;
buyerName?: string;
sellerAvatarUrl?: string;
buyerAvatarUrl?: string;
reputation: number;
trades: number;
created: string;
status: string;
description?: string;
minAmount?: number;
maxAmount?: number;
terms?: Array<{
type: 'positive' | 'negative';
text: string;
}>;
}
🧠 Learnings used
Learnt from: CR
Repo: PACTO-LAT/pacto-p2p PR: 0
File: .cursor/rules/component-patterns.mdc:0-0
Timestamp: 2025-12-06T15:20:46.624Z
Learning: Applies to **/*.{ts,tsx} : Use shared types from `pacto-p2p/types` when possible
Learnt from: CR
Repo: PACTO-LAT/pacto-p2p PR: 0
File: .cursor/rules/stellar-integration.mdc:0-0
Timestamp: 2025-12-06T15:21:28.363Z
Learning: Applies to **/*escrow*.ts : Use escrow types from `packages/types/src/Escrow.ts` for type definitions
Learnt from: CR
Repo: PACTO-LAT/pacto-p2p PR: 0
File: .cursor/rules/typescript-conventions.mdc:0-0
Timestamp: 2025-12-06T15:21:36.000Z
Learning: Applies to packages/types/**/*.{ts,tsx} : Define types in `packages/types` for shared types
Learnt from: CR
Repo: PACTO-LAT/pacto-p2p PR: 0
File: .cursor/rules/typescript-conventions.mdc:0-0
Timestamp: 2025-12-06T15:21:36.000Z
Learning: Applies to **/*.{ts,tsx} : Import types from `pacto-p2p/types` when available
Learnt from: CR
Repo: PACTO-LAT/pacto-p2p PR: 0
File: .cursor/rules/frontend-expert.mdc:0-0
Timestamp: 2025-12-06T15:20:56.605Z
Learning: Applies to **/*.{ts,tsx} : Do not use 'any' type; always search for Trustless Work entity types instead
Learnt from: CR
Repo: PACTO-LAT/pacto-p2p PR: 0
File: .cursor/rules/typescript-conventions.mdc:0-0
Timestamp: 2025-12-06T15:21:36.000Z
Learning: Applies to **/*.{ts,tsx} : Use proper type definitions for all functions and components
- Replace lucide-react User icon with Radix UI Avatar component - Add AvatarImage for profile pictures and AvatarFallback for initials - Add sellerName, buyerName, sellerAvatarUrl, buyerAvatarUrl fields to MarketplaceListing type - Update mock data with trader names for fallback initials - Maintain glassmorphism styling on avatar fallback closes PACTO-LAT#28
|
@aguilar1x please kindly review |
|
@aguilar1x please review |
1 participant
closes #28
Summary by CodeRabbit
New Features
Enhancements
✏️ Tip: You can customize this high-level summary in your review settings.