Add gateway tab to Explorer

[rickstaa]

Summary

The Explorer currently surfaces network-wide data for orchestrators, governance, treasury proposals, and delegation. However, a key stakeholder—Gateways—is not represented.

Adding a dedicated Gateway section to the Explorer will improve visibility into network usage, economic flows, and gateway performance, enabling a more complete understanding of the Livepeer ecosystem.

This data is already partially available on Tools by Livepeer.cloud, but integrating it directly into the Explorer creates a unified and authoritative view for all participants.

---

Goals

Create a first-class Gateway tab within the Explorer that presents:

• A network-wide gateway overview screen (similar to Orchestrators). Implemented under own tab as well as on main page under orchestrator overview and before transactions overview.
• Individual gateway profile pages with economic and activity data
• Relevant historical event and fee data

---

User Stories

• As a network participant, I want to see which gateways are active so I can understand network usage.
• As a researcher or tokenholder, I want visibility into gateway deposits, reserves, and fee flows so I can analyze network economics.
• As a developer, I want gateway data in one canonical place rather than split across tools.

---

Data Sources

• GraphQL Subgraph:
  Experimental endpoint with gateway data:
  https://api.studio.thegraph.com/query/31909/livepeer-ci/pr-168-7e4d7c4-19509005431
• Data freshness logic:
  Follow existing patterns used for orchestrators and delegators.

Active Broadcasters

{
  protocol(id:"0"){
    id
    activeBroadcasters
  }
}

Broadcaster info

{
  broadcasters(where: {id:"0xc3c7c4c8f7061b7d6a72766eee5359fe4f36e61e"}){
    id
    deposit
    reserve
    totalVolumeETH
    ninetyDayVolumeETH
  }
}

---

Scope of Work

1. Gateway Overview Page

Create a new page at:
https://explorer.livepeer.org/gateways

This page should mirror the Orchestrator overview page and include:

• Gateway avatar
• ENS name (where available)
• Reserve balance
• Deposit balance
• Distributed fees (90-day window)
• “View more” link to gateway profile

Sorting and filtering should behave like the Orchestrator list.

---

2. Gateway Profile Page

Create a new profile route:
https://explorer.livepeer.org/accounts/<ENS>/broadcasting

Header Section:

• ENS name, avatar, description (same style as orchestrator profile)

Main Gateway Tab:

• “Active” status (active = has distributed fees in the last 90 days)
• Deposit balance
• Reserve balance
• Total volume (ETH)
• Any other economic/usage metrics available from the subgraph

History Tab:

• Chronological list of gateway events (similar to orchestrator "History")
• Includes fee payouts, deposit changes, reserve changes, etc.

---

UI/UX Requirements

• Match visual and navigational patterns used in the Orchestrator pages
• Reuse existing components where possible (tables, profile headers, history lists)
• Gateway tab accessible from the Explorer homepage navigation

---

Acceptance Criteria

• Users can access the Gateway tab from the Explorer homepage.

• The Gateway overview page lists all gateways with:

  • reserve
  • deposit
  • 90-day fee distribution
  • clear navigation to individual profile pages.

• Gateway profile pages accurately display:

  • gateway metadata
  • deposit & reserve
  • activity status
  • fee/volume metrics
  • historical events

• Data updates follow the same freshness guarantees as other Explorer sections.

• UI layout and interaction match existing Explorer page patterns.

---

TODOs

• Add gateway fee tracking & supporting entities in the subgraph
  (PR: feat: add gateway fee tracking subgraph#168)
• Implement /gateways overview page
• Implement gateway profile route (/accounts/<ENS>/broadcasting)
• Connect subgraph queries and hydrate UI components
• Add gateway navigation entry to Explorer homepage