search

Vagabonds-Labs / cofiblocks

Welcome to Cofiblocks marketplace: A Starknet web3 platform to innovate Costa Rica coffee industry. Cofiblocks connects small coffee farmers directly with coffee lovers, cutting out unnecessary intermediaries.
https://www.cofiblocks.com/
10 stars 20 forks source link

feat: Add NFTs section #24

Open HumbertoTM10 opened 1 month ago

HumbertoTM10 commented 1 month ago

Closes issue #13

Description

This PR introduces significant updates to the NFT collection UI and implements the logic for fetching user-specific NFTs from the blockchain.

Key changes include:

NFT Collection UI: Created a new NFTCollectionPage that displays the user's NFT collection using the NftCard component. The UI adapts to different screen sizes using a responsive grid.

Blockchain Integration: Added functionality to fetch user-specific NFTs from the blockchain using the fetchUserNFTs API call. The NFT data is loaded asynchronously and displayed within the UI. Loading states and error handling have also been implemented.

UI Enhancements: The NftCard component now supports displaying NFT images, titles, and descriptions.

These updates provide a more seamless user experience for interacting with NFTs, with a dynamic UI that displays user assets directly from the blockchain.

Checklist

Type of Change

Testing

Manual Testing

Ensure Blockchain Connection Verify that your blockchain connection is properly configured, and you have access to the wallet. Confirm that the StarkNet network is functioning correctly.

Run the Application Start the Next.js application using npm run dev or yarn dev. Navigate to the NFT collection page where the new UI is implemented.

Verify NFT Display UI Navigate to /nfts (or the route where the NFTCollectionPage is rendered). Check that the NFT collection page loads correctly and that the UI displays the page title “My NFT Collection”.

If the user owns NFTs, verify that the NFTs are displayed in a responsive grid. Each NFT card should show the title, image, and description of the NFT.

Test Loading State Ensure that while the NFTs are being fetched, a "Loading NFTs..." message is displayed.

Once the loading is complete, the NFTs should populate in the UI.

Test Empty State Log in with a wallet that does not own any NFTs.

Verify that the message "You don't own any NFTs yet" is displayed when no NFTs are returned.

Check Blockchain Integration Confirm that the correct NFTs are fetched from the blockchain for the connected user wallet.

Error Handling Simulate network errors or blockchain API issues (disconnecting or invalid responses).

Ensure that errors are caught and logged in the console without crashing the app. The loading state should stop, and the user should still see relevant UI feedback.

Automated Tests

Summary by CodeRabbit

Release Notes

coderabbitai[bot] commented 1 month ago

Walkthrough

The changes introduce a new NFT service and related components to the application. This includes functions to fetch user NFTs from both a TRPC endpoint and the Starknet blockchain. A new React component, NFTCollectionPage, displays the user's NFT collection, while the LoginPage now fetches and shows NFTs as well. Additionally, a new API router for NFTs has been established, enhancing the backend functionality. The NFTCard component has been updated to accommodate new properties for displaying NFT details.

Changes

Files Change Summary
apps/web/src/app/api/nftService.ts Added functions fetchUserNFTs and fetchUserNFTsFromStarknet for fetching NFTs with error handling.
apps/web/src/app/nfts/page.tsx Introduced NFTCollectionPage component to display user NFTs, including state management and loading status.
apps/web/src/app/page.tsx Updated LoginPage to fetch and display NFTs, including state variables for NFTs and loading status.
apps/web/src/server/api/root.ts Added nftRouter to the appRouter, integrating NFT-related routes.
apps/web/src/server/api/routers/nft.ts Introduced nftRouter with the getUserNFTs procedure for fetching user NFTs from the blockchain.
apps/web/src/utils/trpc.ts Created trpc.ts to facilitate TRPC integration with React Query.
packages/ui/src/nftCard.tsx Updated NFTCard component to include new props for image URL and description, enhancing its display capabilities.

Poem

🐇 In fields of code, we hop and play,
New NFTs bloom, brightening the day.
With cards that shine and collections to show,
Our digital treasures, in a vibrant flow.
Fetching and displaying, all in a dance,
Join us, dear friends, in this NFT romance! 🌼✨

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?

❤️ Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
🪧 Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` 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) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
brolag commented 1 month ago

@HumbertoTM10 thanks for the improvements. In general the code is pretty self-explanatory. Can you please remove the unnecessary comments?

Let's use comments only when necessary, otherwise let's rely on clean code best practices to make it readable.

HumbertoTM10 commented 1 month ago

@brolag Removed unnecessary comments and made the suggestion to enhance error handling.

brolag commented 1 month ago

@HumbertoTM10 can you double check these missing conflict lines then run the build and the linter please?

HumbertoTM10 commented 1 month ago

@brolag Done, fixed the conflicts in page.tsx. Let me know if you need anything else.