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

Merged
merged 6 commits into from
Jun 10, 2025
Merged

Supported networks table #975

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 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
4c73304
Remove explicit return type annotations from support level functions
hayderkg Jun 10, 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
17 changes: 17 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,23 @@
"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"
}
}
},
"networkGuides": {
Expand Down
94 changes: 77 additions & 17 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 Down Expand Up @@ -58,6 +58,51 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
</p>
</Callout>

<div className="mb-6 overflow-clip rounded-8 border border-space-1500 bg-space-1800">
<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">
<Text.C10 className="mb-2 uppercase text-white">Subgraphs</Text.C10>
<div className="flex items-center gap-2">
<Check size={4} alt="Checkmark" />
<span className="text-14">{t('index.supportedNetworks.tableLegend.subgraphs.basic')}</span>
</div>
<div className="flex items-center gap-2">
<Checks size={4} alt="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">
<Text.C10 className="mb-2 uppercase text-white">Substreams</Text.C10>
<div className="flex items-center gap-2">
<Check size={4} alt="Checkmark" />
<span className="text-14">{t('index.supportedNetworks.tableLegend.substreams.basic')}</span>
</div>
<div className="flex items-center gap-2">
<Checks size={4} alt="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">
<Text.C10 className="mb-2 uppercase text-white">Firehose</Text.C10>
<div className="flex items-center gap-2">
<Check size={4} alt="Checkmark" />
<span className="text-14">{t('index.supportedNetworks.tableLegend.firehose.basic')}</span>
</div>
<div className="flex items-center gap-2">
<Checks size={4} alt="Checkmarks" />
<span className="text-14">{t('index.supportedNetworks.tableLegend.firehose.full')}</span>
</div>
</div>
<div className="p-4">
<Text.C10 className="mb-2 uppercase text-white">Token API</Text.C10>
<div className="flex items-center gap-2">
<Check size={4} alt="Checkmark" />
<span className="text-14">{t('index.supportedNetworks.tableLegend.tokenApi.supported')}</span>
</div>
</div>
</div>
</div>

<div className="mb-4 flex items-center gap-4">
<div className="flex-grow">
<ExperimentalSearch
Expand Down Expand Up @@ -103,9 +148,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 @@ -124,26 +166,44 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
key={network.id}
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>
<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.subgraphsSupportLevel === 'full' ? (
<Checks size={4} alt="Checkmarks" />
) : network.subgraphsSupportLevel === 'basic' ? (
<Check size={4} alt="Checkmark" />
) : null}
</td>
<td align="center">
{network.substreamsSupportLevel === 'full' ? (
<Checks size={4} alt="Checkmarks" />
) : network.substreamsSupportLevel === 'basic' ? (
<Check size={4} alt="Checkmark" />
) : null}
</td>
<td align="center">
{network.firehoseSupportLevel === 'full' ? (
<Checks size={4} alt="Checkmarks" />
) : network.firehoseSupportLevel === 'basic' ? (
<Check size={4} alt="Checkmark" />
) : null}
</td>
<td align="center">{network.tokenApi ? <Check size={4} alt="Checkmark" /> : null}</td>
</tr>
))}
Expand Down
27 changes: 27 additions & 0 deletions website/src/supportedNetworks/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
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: any): 'none' | 'basic' | 'full' => {
const hasSubgraphs = Boolean(network.services.subgraphs?.length || network.services.sps?.length)

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

export const getSubstreamsSupportLevel = (network: any): '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: any): 'none' | 'basic' | 'full' => {
const firehoseCount = network.services.firehose?.length || 0
if (firehoseCount === 0) return 'none'
if (firehoseCount >= 2) return 'full'
return 'basic'
}

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