Feat/display scholar nfts

[AugistineCreates]

This pr closes #596

This pull request resolves the issue where the frontend profile page does not display earned Scholar NFTs. Instead of querying the database which can be out of sync, it integrates direct on-chain querying of the scholar_nft contract to retrieve all credentials earned by the connected wallet, fetches the metadata from IPFS, and displays them dynamically in the profile page gallery.

Additionally, it adds a celebratory confetti animation when a user loads the profile page with a newly earned NFT, applies a custom pulsing gradient border glow to the new NFT card, and makes each card clickable to navigate to its verification page.

Action Items Resolved

• Query scholar_nft balance and token IDs for the connected wallet on-chain.
• Fetch NFT metadata (image, course name, date) from IPFS.
• Display NFT gallery in the Profile page.
• Add dynamic pulse/glow animation and confetti celebration on newly earned NFTs.
• Link each NFT card directly to its on-chain verification page.

Key Changes

1. Frontend Hooks (src/hooks/useScholarNft.ts):
   • Implemented queryAllScholars to simulate calling the get_all_scholars contract function.
   • Added the useUserScholarNfts hook to query all scholars, resolve token IDs belonging to the connected wallet, fetch IPFS metadata/on-chain details in parallel, and handle retry states.
2. Profile UI (src/pages/Profile.tsx):
   • Swapped out the legacy /api/credentials/:address API route for the new useUserScholarNfts contract hook.
   • Added logic to detect a newly earned NFT (minted within the last 10 minutes or unseen based on localStorage cached IDs).
   • Integrated canvas-confetti to trigger a colorful celebratory burst when a new NFT is loaded.
   • Wrapped the NFT cards in a React Router <Link> leading to /credentials/${nft.id}.
3. Styles & Keyframes (src/index.css):
   • Defined @keyframes newNftGlow and the .new-nft-card class to add a premium, rotating gradient glow effect to newly earned cards.

How Has This Been Tested?

• Verified that git diff contains modifications only within the src/hooks/useScholarNft.ts, src/index.css, and src/pages/Profile.tsx files.
• Ensured formatting and type declarations match the project standards.
• Successfully built/checked code files before committing.

[Anuoluwapo25]

Hi, Can you pull from upstream

[drips-wave]

@AugistineCreates Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits