feat(networks): load network configs from external metadata repository

[AugustoL]

This pull request refactors how blockchain network metadata is managed and displayed in the app. Instead of hardcoding network information and logos, the app now fetches network data dynamically from an external metadata repository. This enables easier updates and scalability as new networks are added. The changes also centralize network state management in the app context and simplify how network icons are rendered.

Key changes include:

Dynamic Network Metadata Loading

• Removed hardcoded network definitions and logo imports from networks.ts and components. Network metadata, including logos, is now loaded asynchronously from an external metadata service (MetadataService). The code includes caching and reload mechanisms for efficiency. [1] [2]
• The AppContext now manages network state, including loading, error handling, and access to enabled networks based on environment variables. A new useNetworks hook provides this data to components. [1] [2]

Component Refactoring for Dynamic Networks

• The NetworkBlockIndicator and Home components now use the new useNetworks hook and context to access network data, instead of importing static lists. This allows them to display networks dynamically and react to loading states. [1] [2] [3] [4] [5] [6] [7] [8]

Network Icon Handling

• The NetworkIcon component now loads network logos dynamically using URLs from the metadata. If a logo fails to load or is missing, it falls back to a generic Ethereum SVG icon. Legacy SVG icon components and static logo imports have been removed. [1] [2]

Codebase Cleanup

• Removed all unused static network logo imports and SVG icon components from both NetworkBlockIndicator and NetworkIcon. [1] [2] [3]
• Updated types and interfaces to reflect the new structure for network metadata and configuration. [1] [2]

These changes make the app more maintainable and ready to support a growing list of blockchain networks with minimal code changes.

---

Dynamic Network Metadata Loading

• Refactored networks.ts to remove hardcoded network lists and instead fetch network metadata (including logo info) from an external service, with caching and reload support. [1] [2]
• Updated AppContext to manage network state, including loading, enabled network filtering, and error handling; provided a useNetworks hook for easy access in components. [1] [2]

Component Refactoring for Dynamic Networks

• Updated NetworkBlockIndicator and Home components to use the new context and hooks, supporting dynamic networks and improved loading state handling. [1] [2] [3] [4] [5] [6] [7] [8]

Network Icon Handling

• Redesigned NetworkIcon to load logos dynamically via URL, with fallback to Ethereum SVG if the logo is missing or fails to load; removed all static SVG icon code. [1] [2]

Codebase Cleanup

• Removed unused static logo imports and legacy SVG icon components from all affected files. [1] [2] [3]
• Updated types and interfaces to align with the new metadata-driven approach. [1] [2]This pull request introduces a major refactor to how network configurations are managed and loaded in the application. Instead of relying on a static, hardcoded list, networks are now dynamically fetched from the external explorer-metadata repository. This enables more up-to-date and scalable network support. The changes also introduce a new NetworkContext for global access to network data, update the NetworkIcon component to use dynamic logo URLs, and add a new metadata service for fetching and caching network information.

Key changes:

Dynamic Network Configuration & Loading:

• Refactored NetworkConfig and related logic in src/config/networks.ts to load networks dynamically from the explorer-metadata repository via a new async loadNetworks() function, replacing the previous static ALL_NETWORKS array. Added caching, conversion utilities, and new helpers for logo URLs and reloads. [1] [2] [3] [4]
• Added src/services/MetadataService.ts to handle fetching, caching, and parsing network metadata and logo URLs from the external repository.

Network Context API:
This pull request refactors how network metadata is managed and accessed throughout the app. Instead of hardcoding network information and assets, the app now loads network metadata dynamically from an external source (the explorer-metadata repository) and provides this data via context. This makes the app more scalable and easier to update as new networks are added or existing ones change. The changes also standardize how network icons are rendered and how network information is retrieved in components.

Network metadata loading and context management:

• Replaces hardcoded network lists and icon imports in src/config/networks.ts with dynamic loading from the explorer-metadata repository, including caching and utility functions for fetching, reloading, and accessing network data. [1] [2] [3]
• Updates the AppContext in src/context/AppContext.tsx to provide network data (including loading state, error handling, and reload capability) to the rest of the app, and adds useNetworks and useNetwork hooks for convenient access. [1] [2] [3] [4] [5]

Component refactoring for network display:

• Refactors src/components/common/NetworkBlockIndicator.tsx to use the new context-based network data and a unified NetworkIcon component, removing all direct imports of network logos and SVG icon logic. [1] [2] [3] [4]
• Refactors src/components/common/NetworkIcon.tsx to use a single entry point for network icons: it attempts to load the logo from metadata and falls back to a generic Ethereum SVG if not available or if loading fails. [1] [2]

These changes improve maintainability, scalability, and consistency in how network information and icons are handled across the app.

• Introduced NetworkContext in src/context/NetworkContext.tsx to provide network data, loading/error states, and reload functionality throughout the app.
• Registered NetworkProvider in the top-level component tree in src/App.tsx to wrap the application and supply network context. [1] [2]

Network Icon Improvements:

• Refactored NetworkIcon in src/components/common/NetworkIcon.tsx to use dynamic logo URLs from metadata, with a fallback to an Ethereum icon if the logo fails to load. Removed static SVG imports and logic. [1] [2]

These changes make the app more maintainable and future-proof by decoupling network data from the codebase and enabling easier updates via the metadata repository.