Skip to content

Supported networks table #975

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Supported networks table #975

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a1af774
implement service level for NetworksTable
hayderkg Jun 5, 2025
d32fa4f
Table Legend literals
hayderkg Jun 5, 2025
5219db7
general improvements
hayderkg Jun 6, 2025
a669ce0
fix lint
hayderkg Jun 6, 2025
08f205e
fix lint
hayderkg Jun 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions website/src/pages/en/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,28 @@
"substreams": "Substreams",
"firehose": "Firehose",
"tokenApi": "Token API"
},
"tableLegend": {
"subgraphs": {
"basic": "Subgraph Studio (No issuance)",
"full": "The Graph Network (Issuance)"
},
"substreams": {
"basic": "Base",
"full": "Extended (EVM Only)"
},
"firehose": {
"basic": "Base",
"full": "Extended (EVM Only)"
},
"tokenApi": {
"supported": "All endpoints supported"
},
"icons": {
"checkmark": "Checkmark",
"checkmarks": "Checkmarks"
},
"legendTitle": "Table Legend"
Comment on lines +76 to +96
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌

}
},
"networkGuides": {
Expand Down
111 changes: 92 additions & 19 deletions website/src/supportedNetworks/NetworksTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
Text,
useDebounce,
} from '@edgeandnode/gds'
import { Check, EyeClosed } from '@edgeandnode/gds/icons'
import { Check, Checks, EyeClosed } from '@edgeandnode/gds/icons'
import { NetworkIcon } from '@edgeandnode/go'

import { Callout, Table } from '@/components'
Expand All @@ -24,6 +24,13 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
const [immediateSearchQuery, setSearchQuery] = useState('')
const [immediateShowTestnets, setShowTestnets] = useState(false)

const checkmark = (
<Check size={4} alt={t('index.supportedNetworks.tableLegend.icons.checkmark')} className="h-[0.75lh]" />
)
const checkmarks = (
<Checks size={4} alt={t('index.supportedNetworks.tableLegend.icons.checkmarks')} className="h-[0.75lh]" />
)

const searchQuery = useDebounce(immediateSearchQuery, 200)
const showTestnets = useDebounce(immediateShowTestnets, 200)

Expand Down Expand Up @@ -58,6 +65,57 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
</p>
</Callout>

<aside
className="mb-6 overflow-clip rounded-8 border border-space-1500 bg-space-1800"
aria-labelledby="networks-table-legend"
>
<h3 id="networks-table-legend" className="sr-only">
{t('index.supportedNetworks.tableLegend.legendTitle')}
</h3>
<div className="grid grid-cols-1 gap-px text-space-500 xs:grid-cols-2">
<div className="border-b border-r border-space-1500 p-4">
<span className="text-c10 mb-2 block text-white">Subgraphs</span>
<div className="flex gap-2">
{checkmark}
<span className="text-14">{t('index.supportedNetworks.tableLegend.subgraphs.basic')}</span>
</div>
<div className="flex gap-2">
{checkmarks}
<span className="text-14">{t('index.supportedNetworks.tableLegend.subgraphs.full')}</span>
</div>
</div>
<div className="border-b border-r border-space-1500 p-4 lg:border-r-0">
<span className="text-c10 mb-2 block text-white">Substreams</span>
<div className="flex gap-2">
{checkmark}
<span className="text-14">{t('index.supportedNetworks.tableLegend.substreams.basic')}</span>
</div>
<div className="flex gap-2">
{checkmarks}
<span className="text-14">{t('index.supportedNetworks.tableLegend.substreams.full')}</span>
</div>
</div>
<div className="border-b border-r border-space-1500 p-4">
<span className="text-c10 mb-2 block text-white">Firehose</span>
<div className="flex gap-2">
{checkmark}
<span className="text-14">{t('index.supportedNetworks.tableLegend.firehose.basic')}</span>
</div>
<div className="flex gap-2">
{checkmarks}
<span className="text-14">{t('index.supportedNetworks.tableLegend.firehose.full')}</span>
</div>
</div>
<div className="p-4">
<span className="text-c10 mb-2 block text-white">Token API</span>
<div className="flex gap-2">
{checkmark}
<span className="text-14">{t('index.supportedNetworks.tableLegend.tokenApi.supported')}</span>
</div>
</div>
</div>
</aside>

<div className="mb-4 flex items-center gap-4">
<div className="flex-grow">
<ExperimentalSearch
Expand Down Expand Up @@ -103,9 +161,6 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
<th className="min-w-47">
<Text.C10>{t('index.supportedNetworks.tableHeaders.name')}</Text.C10>
</th>
<th className="min-w-47">
<Text.C10>{t('index.supportedNetworks.tableHeaders.id')}</Text.C10>
</th>
<th align="center">
<Text.C10>{t('index.supportedNetworks.tableHeaders.subgraphs')}</Text.C10>
</th>
Expand All @@ -125,26 +180,44 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
className="group/table-row isolate -outline-offset-1 transition hocus-visible-within:bg-space-1600 has-[a:focus-visible]:outline-focus"
>
<td>
<ButtonOrLink href={`/supported-networks/${network.id}`} className="static outline-none">
<span className="flex items-center gap-2">
<NetworkIcon network={network} variant={getIconVariant(network.id)} size={5} />
<span className="text-body-xsmall">{network.shortName}</span>
</span>
<span className="absolute inset-y-0 start-0 z-10 w-[1999px]" />
</ButtonOrLink>
</td>
<td>
<div className="flex items-center justify-between gap-2">
<span className="text-body-xsmall">{network.id}</span>
<div className="static flex items-center justify-between gap-2">
<ButtonOrLink href={`/supported-networks/${network.id}`} className="static outline-none">
<div className="flex items-center gap-3">
<NetworkIcon network={network} variant={getIconVariant(network.id)} size={5} />
<div className="flex flex-col">
<span className="text-body-xsmall leading-5 text-white">{network.shortName}</span>
<span className="text-body-xsmall leading-5 text-space-500">{network.id}</span>
</div>
</div>
<span className="absolute inset-y-0 start-0 z-10 w-[1999px]" />
</ButtonOrLink>
<div className="z-20 shrink-0 opacity-0 transition group-focus-within/table-row:opacity-100 group-hover/table-row:opacity-100">
<ExperimentalCopyButton size="small" variant="tertiary" value={network.id} />
</div>
</div>
</td>
<td align="center">{network.subgraphs ? <Check size={4} alt="Checkmark" /> : null}</td>
<td align="center">{network.substreams ? <Check size={4} alt="Checkmark" /> : null}</td>
<td align="center">{network.firehose ? <Check size={4} alt="Checkmark" /> : null}</td>
<td align="center">{network.tokenApi ? <Check size={4} alt="Checkmark" /> : null}</td>
<td align="center">
{network.subgraphsSupportLevel === 'full'
? checkmarks
: network.subgraphsSupportLevel === 'basic'
? checkmark
: null}
</td>
<td align="center">
{network.substreamsSupportLevel === 'full'
? checkmarks
: network.substreamsSupportLevel === 'basic'
? checkmark
: null}
</td>
<td align="center">
{network.firehoseSupportLevel === 'full'
? checkmarks
: network.firehoseSupportLevel === 'basic'
? checkmark
: null}
</td>
<td align="center">{network.tokenApi ? checkmark : null}</td>
</tr>
))}
</tbody>
Expand Down
29 changes: 28 additions & 1 deletion website/src/supportedNetworks/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { NetworksRegistry } from '@pinax/graph-networks-registry'
import { type Network, NetworksRegistry } from '@pinax/graph-networks-registry'

// Networks that should use the "mono" icon variant (TODO: add this feature to web3icons?)
export const MONO_ICON_NETWORKS = [
Expand Down Expand Up @@ -41,6 +41,29 @@ export const getIconVariant = (networkId: string): 'mono' | 'branded' => {
return MONO_ICON_NETWORKS.includes(networkId) ? 'mono' : 'branded'
}

// Suport level for services
export const getSubgraphsSupportLevel = (network: Network): 'none' | 'basic' | 'full' => {
const hasSubgraphs = Boolean(network.services.subgraphs?.length || network.services.sps?.length)

if (!hasSubgraphs) return 'none'
if (network.issuanceRewards) return 'full'
return 'basic'
}

export const getSubstreamsSupportLevel = (network: Network): 'none' | 'basic' | 'full' => {
const substreamCount = network.services.substreams?.length || 0
if (substreamCount === 0) return 'none'
if (substreamCount >= 2) return 'full'
return 'basic'
}

export const getFirehoseSupportLevel = (network: Network): 'none' | 'basic' | 'full' => {
const firehoseCount = network.services.firehose?.length || 0
if (firehoseCount === 0) return 'none'
if (firehoseCount >= 2) return 'full'
return 'basic'
}
Comment on lines +44 to +65
Copy link
Contributor

@benface benface Jun 6, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// Suport level for services
export const getSubgraphsSupportLevel = (network: Network): 'none' | 'basic' | 'full' => {
const hasSubgraphs = Boolean(network.services.subgraphs?.length || network.services.sps?.length)
if (!hasSubgraphs) return 'none'
if (network.issuanceRewards) return 'full'
return 'basic'
}
export const getSubstreamsSupportLevel = (network: Network): 'none' | 'basic' | 'full' => {
const substreamCount = network.services.substreams?.length || 0
if (substreamCount === 0) return 'none'
if (substreamCount >= 2) return 'full'
return 'basic'
}
export const getFirehoseSupportLevel = (network: Network): 'none' | 'basic' | 'full' => {
const firehoseCount = network.services.firehose?.length || 0
if (firehoseCount === 0) return 'none'
if (firehoseCount >= 2) return 'full'
return 'basic'
}
export const getSubgraphsSupportLevel = (network: Network) => {
const hasSubgraphs = Boolean(network.services.subgraphs?.length || network.services.sps?.length)
if (!hasSubgraphs) return 'none'
if (network.issuanceRewards) return 'full'
return 'basic'
}
export const getSubstreamsSupportLevel = (network: Network) => {
const substreamCount = network.services.substreams?.length || 0
if (substreamCount === 0) return 'none'
if (substreamCount >= 2) return 'full'
return 'basic'
}
export const getFirehoseSupportLevel = (network: Network) => {
const firehoseCount = network.services.firehose?.length || 0
if (firehoseCount === 0) return 'none'
if (firehoseCount >= 2) return 'full'
return 'basic'
}

Or do you feel that the return types are helpful? Don't want to insist, I know there's some subjectivity on that topic... but I truly don't see the point; if someone accidentally changes the type that's returned in the future, I feel like TS will catch it when we actually use the value (e.g. if (network.subgraphsSupportLevel === 'none') will error if subgraphsSupportLevel can never be none). I definitely have a bias for "less code is better", but I swear there are cases where I find return types helpful; I just fail to see this as one of them.


export async function getSupportedNetworks() {
const registry = await NetworksRegistry.fromLatestVersion()
return registry.networks
Expand All @@ -61,6 +84,10 @@ export async function getSupportedNetworks() {
substreams,
firehose,
tokenApi,
rawNetwork: network,
subgraphsSupportLevel: getSubgraphsSupportLevel(network),
substreamsSupportLevel: getSubstreamsSupportLevel(network),
firehoseSupportLevel: getFirehoseSupportLevel(network),
},
]
})
Expand Down