feat: implement user dashboard and fixes linting errors #110
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis PR updates type annotations and interfaces for the User Dashboard by replacing generic types with more specific ones in both the UI component and its mock data. It also adds new TypeScript interfaces to structure project-related data and extends the escrow functionality by initializing a payer account and creating a claimable balance transaction using the Stellar SDK. Changes
Sequence Diagram(s)sequenceDiagram
participant Client
participant EscrowContract
participant StellarSDK
Client->>EscrowContract: initializeEscrowContract()
EscrowContract->>StellarSDK: Create payerAccount (Account)
EscrowContract->>StellarSDK: Initialize TransactionBuilder
StellarSDK-->>EscrowContract: TransactionBuilder instance
EscrowContract->>StellarSDK: Add createClaimableBalance operation
EscrowContract->>StellarSDK: Set transaction timeout
EscrowContract-->>Client: Return transaction result
Assessment against linked issues
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🔇 Additional comments (5)
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
apps/web/components/sections/user/dashboard.tsx(1 hunks)
🔇 Additional comments (2)
apps/web/components/sections/user/dashboard.tsx (2)
123-133: LGTM! Well-structured metrics grid.The implementation uses a responsive grid layout with semantic colors for visual hierarchy.
74-223: LGTM! Well-structured and responsive implementation.The UserDashboard component is well-implemented with:
- Clear section organization
- Responsive layouts
- Proper accessibility attributes
- Smooth animations and transitions
The suggested improvements focus on type safety and data management but don't impact the current functionality.
There was a problem hiding this comment.
Actionable comments posted: 7
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
apps/web/components/sections/user/dashboard.tsx(1 hunks)apps/web/lib/mock-data/mock-user-dashboard.tsx(1 hunks)apps/web/lib/types/userdashboard.ts(1 hunks)
🔇 Additional comments (2)
apps/web/lib/types/userdashboard.ts (1)
3-6: LGTM! Well-structured Tag interface.The Tag interface is simple, clear, and provides good type safety for tag data.
apps/web/components/sections/user/dashboard.tsx (1)
131-157: Create a dedicated updates data structure.The Latest Updates section currently reuses project data and uses the current date for all updates. This is a duplicate of a previous suggestion, but the implementation is still pending.
coderabbitai
bot
added
documentation
evgongora
changed the title
There was a problem hiding this comment.
Actionable comments posted: 5
♻️ Duplicate comments (1)
apps/web/lib/mock-data/mock-user-dashboard.tsx (1)
15-16: 🛠️ Refactor suggestionStandardize currency formatting across the dashboard.
Currency values are inconsistent:
- Project amounts use raw numbers
- Impact metrics mix USD ($12,890.50) and ETH (0.5 ETH) formats
Consider using a consistent format and currency type throughout the dashboard.
Also applies to: 33-34, 49-49, 59-59
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (9)
apps/web/app/api/escrow/initialize/route.ts(1 hunks)apps/web/components/sections/user/dashboard.tsx(1 hunks)apps/web/lib/error.ts(1 hunks)apps/web/lib/mock-data/mock-user-dashboard.tsx(1 hunks)apps/web/lib/stellar/escrow.ts(1 hunks)apps/web/lib/types/escrow.ts(1 hunks)apps/web/lib/types/user-dashboard.ts(1 hunks)apps/web/lib/utils/id.ts(1 hunks)apps/web/lib/validators/escrow.ts(1 hunks)
🧰 Additional context used
📓 Learnings (2)
apps/web/app/api/escrow/initialize/route.ts (1)
Learnt from: AndlerRL
PR: kindfi-org/kindfi#86
File: apps/web/app/api/escrow/initialize/route.ts:7-10
Timestamp: 2025-01-29T09:35:10.981Z
Learning: Documentation for Supabase environment variables, particularly SUPABASE_SERVICE_ROLE_KEY, should be properly maintained in apps/web/.env.sample and validated in lib/supabase/check-env-vars.ts.
apps/web/lib/validators/escrow.ts (1)
Learnt from: AndlerRL
PR: kindfi-org/kindfi#86
File: apps/web/lib/validators/escrow.ts:54-64
Timestamp: 2025-01-27T19:06:49.271Z
Learning: When reviewing code, if suggestions are related to a different feature or task, create a separate issue to track them instead of implementing them in the current PR. This helps maintain focus and track related changes effectively.
🔇 Additional comments (15)
apps/web/lib/error.ts (1)
1-11: LGTM! Type safety improvements.The addition of generic type parameter
Tand removal ofanytype improves type safety and flexibility.apps/web/lib/mock-data/mock-user-dashboard.tsx (1)
10-10: Verify image file paths.The image paths
/images/kids.webpand/images/healthcare.webpneed verification.Also applies to: 28-28
apps/web/lib/stellar/escrow.ts (1)
65-68: LGTM! Environment variable validation added.Good addition of environment variable check for STELLAR_NETWORK_URL.
apps/web/lib/validators/escrow.ts (1)
35-101: LGTM! Comprehensive validation implementation.The validation logic is thorough and well-structured, covering all necessary aspects of escrow initialization including contract parameters, parties, milestones, platform fee, and metadata.
apps/web/app/api/escrow/initialize/route.ts (1)
9-16: LGTM! Proper environment variable validation.Early validation of required environment variables prevents runtime issues.
apps/web/components/sections/user/dashboard.tsx (3)
134-160: Improve date handling in updates section.The current implementation uses the current date for all updates instead of project-specific dates.
67-77: Enhance metric cards accessibility.The metric cards need improved accessibility and interactivity.
97-122: Add error boundaries and loading states.The Active Projects section should handle loading and error states.
apps/web/lib/types/escrow.ts (7)
1-7: Formatting: Consistent Semicolon Removal inEscrowStateThe removal of semicolons in the union type definition is consistently applied and aligns with your formatting style. No functional or semantic issues are introduced by this change.
8-15: Interface Definition:MilestoneThe
Milestoneinterface is clear and well-structured. Removing the semicolons from each property maintains uniformity without affecting the clarity or functionality of the type.
17-21: Interface Definition:EscrowPartiesThe property definitions and inline comments in the
EscrowPartiesinterface are well articulated. The semicolon removal is consistently applied, enhancing readability while preserving context.
23-28: Interface Definition:EscrowContractParamsThe
EscrowContractParamsinterface is correctly formatted. Consistently omitting semicolons does not detract from the clarity of the property definitions.
30-35: Interface Definition:EscrowMetadataThe
EscrowMetadatainterface remains concise and clear. The formatting changes (removal of semicolons) are applied uniformly, supporting code style consistency.
37-40: Interface Definition:EscrowInitializationThis interface has been updated in line with the project's formatting guidelines. The removal of semicolons is consistent with the changes in other interfaces in the file.
42-58: Interface Definition:EscrowContractThe
EscrowContractinterface is well-structured and follows the expected database type conventions, including the usage of snake_case for property names. The semicolon removal is applied uniformly. Just ensure that this naming convention aligns with other parts of your system.
There was a problem hiding this comment.
Actionable comments posted: 3
🔭 Outside diff range comments (6)
apps/web/lib/types/user-dashboard.ts (1)
10-22: Consider adding validation constraints for numeric fields.The
Projectinterface could benefit from runtime validation to ensure data integrity:
currentAmount,targetAmount,minInvestmentshould be positive numbersinvestorsshould be a non-negative integerpercentageCompleteshould be between 0 and 100Consider using zod for runtime validation:
import { z } from 'zod' export const ProjectSchema = z.object({ id: z.string(), image: z.string().url(), category: z.string(), title: z.string(), description: z.string(), currentAmount: z.number().positive(), targetAmount: z.number().positive(), investors: z.number().int().nonnegative(), minInvestment: z.number().positive(), percentageComplete: z.number().min(0).max(100), tags: z.array(z.object({ id: z.string(), text: z.string() })) }) export type Project = z.infer<typeof ProjectSchema>apps/web/lib/mock-data/mock-user-dashboard.tsx (1)
43-59: Standardize currency format in impact metrics.The mock data uses inconsistent currency formats ($12,890.50 vs 0.5 ETH). This could confuse users about the value representation.
Consider standardizing to a single currency format or clearly labeling different currency types:
export const mockImpactMetrics: ImpactMetricItem[] = [ { label: 'Total Impact', - value: '$12,890.50', + value: '12,890.50 USD', icon: <BarChart2 className="h-5 w-5 text-teal-500" />, }, // ... { label: 'Available Balance', - value: '0.5 ETH', + value: '0.5 ETH ($925.00 USD)', icon: <Wallet className="h-5 w-5 text-purple-500" />, }, ]apps/web/lib/stellar/escrow.ts (3)
63-65: Implement the required toXDRObject function.The
toXDRObjectfunction is required by the Stellar SDK but currently throws a "not implemented" error. This will cause runtime failures.Consider implementing the function:
-toXDRObject: (): xdr.Claimant => { - throw new Error('Function not implemented.') -}, +toXDRObject: (): xdr.Claimant => { + return new xdr.Claimant({ + v0: new xdr.ClaimantV0({ + destination: xdr.PublicKey.publicKeyTypeEd25519( + Buffer.from(params.parties.receiver, 'hex') + ), + predicate: Predicate.and([ + Predicate.beforeRelativeTime('12096000'), + Predicate.not(Predicate.beforeAbsoluteTime('0')), + ]).toXDR(), + }), + }) +},
77-78: Add environment variable validation.The code forces the STELLAR_NETWORK_URL as non-null without validation.
Add proper environment variable validation:
-// biome-ignore lint/style/noNonNullAssertion: <explanation> -const server = new Server(process.env.STELLAR_NETWORK_URL!) // Set your Stellar network URL +const networkUrl = process.env.STELLAR_NETWORK_URL +if (!networkUrl) { + throw new AppError('STELLAR_NETWORK_URL environment variable is not set', 500) +} +const server = new Server(networkUrl)
88-95: Enhance error handling with specific error types.The error handling could be more specific to help with debugging and client responses.
Consider categorizing errors:
} catch (error) { console.error('Failed to initialize escrow contract:', error) + if (error instanceof Server.NotFoundError) { + throw new AppError('Account not found on the Stellar network', 404, error) + } + if (error instanceof Server.NetworkError) { + throw new AppError('Failed to connect to Stellar network', 503, error) + } throw new AppError( error instanceof Error ? error.message : 'Unknown error occurred', 500, error, ) }apps/web/components/sections/user/dashboard.tsx (1)
132-136: Improve date handling in updates section.Using the current date for all updates is misleading and could confuse users.
Consider adding proper timestamps to the mock data:
-const formattedDate = new Date().toLocaleDateString(undefined, { +const formattedDate = new Date(project.updatedAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric', }) -<time dateTime={new Date().toISOString()} className="text-xs text-gray-500 mt-2 block"> +<time dateTime={project.updatedAt} className="text-xs text-gray-500 mt-2 block">Update the Project interface to include timestamps:
interface Project { // ... existing fields updatedAt: string; // ISO date string createdAt: string; // ISO date string }Also applies to: 150-154
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
apps/web/components/sections/user/dashboard.tsx(3 hunks)apps/web/lib/mock-data/mock-user-dashboard.tsx(2 hunks)apps/web/lib/stellar/escrow.ts(1 hunks)apps/web/lib/types/user-dashboard.ts(1 hunks)
* fix: kebab case for userdashboard types and linting errors * fix: build issues --------- Co-authored-by: Brandon Fernández <[email protected]> Co-authored-by: Bran18 <[email protected]>
📝 Summary
Implements a new user dashboard featuring impact metrics, project cards, and latest updates with a responsive design.
https://www.loom.com/share/d8fbd04dcd2348aaaddc8c5dbf48f585?sid=8701d41f-41cb-4ec2-9d8b-cf8925f4e225
🔗 Related Issues
Closes #54
🔄 Changes Made
🧪 Testing
Tested responsive layout
Verified image optimization
Checked accessibility
Validated component functionality
✅ Self-Check
[x] Follows TypeScript/React best practices
[x] Implements responsive design
[x] Maintains accessibility standards
[x] Optimizes for performance
💬 Comments
Open to feedback on component structure and styling approach. :)
Future enhancements include real-time data integration and enhanced filtering.
Summary by CodeRabbit
New Features
Refactor