feat(explorer): As a user, I want the Module page to display Portals leveraging it

[Chirag-S-Kotian]

What does this PR do?

Adds Portal List to Module Page

Overview

This PR enhances the Module page by displaying a list of Portals that utilize the selected module. This improvement provides users with concrete examples of where each module is being used in practice, making the platform more informative and interconnected.

Changes Made

New Components

• Added ModulePortals component to display portals using a specific module
• Implemented skeleton loading states for better UX during data fetching

Implementation Details

1. Data Fetching:

   • Utilized SWR for efficient data fetching and caching
   • Fetches up to 100 portals initially
   • Filters portals to show only those that include the current module address
   • Limits display to 5 most recent portals

2. Type Safety:

   • Enhanced type safety for Ethereum addresses using `0x${string}` type
   • Added proper type assertions for portal IDs and addresses
   • Updated skeleton data to match the expected types

3. UI/UX:

   • Reused existing DataTable component for consistent UI
   • Added loading states with skeleton placeholders
   • Maintained design consistency with the Schema page

Code Improvements

• Improved code organization by separating portal-related components
• Enhanced type safety across portal-related components
• Added proper error handling for failed data fetches
• Implemented consistent formatting and styling

Testing

• Verified portal list displays correctly for modules with multiple implementations
• Confirmed loading states work as expected
• Tested edge cases (modules with no portals, network errors)
• Verified type safety across components

Additional Notes

• The implementation follows the same pattern as the Schema page for consistency
• Limited to 5 portals to maintain performance and avoid information overload
• Added type assertions to ensure type safety with Ethereum addresses

Related ticket

Fixes #784

Type of change

• Chore
• Bug fix
• New feature
• Documentation update

Check list

• Unit tests for any smart contract change
• Contracts and functions are documented

[Chirag-S-Kotian]

comments please @alainncls

[alainncls]

comments please @alainncls

I'm already notified when you push a change, don't worry 😉