Skip to content

Commit d9c9ba1

Browse files
hayderkghayderkg
authored
Supported networks table (#975)
* implement service level for NetworksTable * Table Legend literals * general improvements * fix lint * fix lint * Remove explicit return type annotations from support level functions
1 parent bdb6aff commit d9c9ba1

File tree

3 files changed

+139
-20
lines changed

3 files changed

+139
-20
lines changed

‎website/src/pages/en/index.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,28 @@
7272
"substreams": "Substreams",
7373
"firehose": "Firehose",
7474
"tokenApi": "Token API"
75+
},
76+
"tableLegend": {
77+
"subgraphs": {
78+
"basic": "Subgraph Studio (No issuance)",
79+
"full": "The Graph Network (Issuance)"
80+
},
81+
"substreams": {
82+
"basic": "Base",
83+
"full": "Extended (EVM Only)"
84+
},
85+
"firehose": {
86+
"basic": "Base",
87+
"full": "Extended (EVM Only)"
88+
},
89+
"tokenApi": {
90+
"supported": "All endpoints supported"
91+
},
92+
"icons": {
93+
"checkmark": "Checkmark",
94+
"checkmarks": "Checkmarks"
95+
},
96+
"legendTitle": "Table Legend"
7597
}
7698
},
7799
"networkGuides": {

‎website/src/supportedNetworks/NetworksTable.tsx

Lines changed: 92 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
Text,
1212
useDebounce,
1313
} from '@edgeandnode/gds'
14-
import { Check, EyeClosed } from '@edgeandnode/gds/icons'
14+
import { Check, Checks, EyeClosed } from '@edgeandnode/gds/icons'
1515
import { NetworkIcon } from '@edgeandnode/go'
1616

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

27+
const checkmark = (
28+
<Check size={4} alt={t('index.supportedNetworks.tableLegend.icons.checkmark')} className="h-[0.75lh]" />
29+
)
30+
const checkmarks = (
31+
<Checks size={4} alt={t('index.supportedNetworks.tableLegend.icons.checkmarks')} className="h-[0.75lh]" />
32+
)
33+
2734
const searchQuery = useDebounce(immediateSearchQuery, 200)
2835
const showTestnets = useDebounce(immediateShowTestnets, 200)
2936

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

68+
<aside
69+
className="mb-6 overflow-clip rounded-8 border border-space-1500 bg-space-1800"
70+
aria-labelledby="networks-table-legend"
71+
>
72+
<h3 id="networks-table-legend" className="sr-only">
73+
{t('index.supportedNetworks.tableLegend.legendTitle')}
74+
</h3>
75+
<div className="grid grid-cols-1 gap-px text-space-500 xs:grid-cols-2">
76+
<div className="border-b border-r border-space-1500 p-4">
77+
<span className="text-c10 mb-2 block text-white">Subgraphs</span>
78+
<div className="flex gap-2">
79+
{checkmark}
80+
<span className="text-14">{t('index.supportedNetworks.tableLegend.subgraphs.basic')}</span>
81+
</div>
82+
<div className="flex gap-2">
83+
{checkmarks}
84+
<span className="text-14">{t('index.supportedNetworks.tableLegend.subgraphs.full')}</span>
85+
</div>
86+
</div>
87+
<div className="border-b border-r border-space-1500 p-4 lg:border-r-0">
88+
<span className="text-c10 mb-2 block text-white">Substreams</span>
89+
<div className="flex gap-2">
90+
{checkmark}
91+
<span className="text-14">{t('index.supportedNetworks.tableLegend.substreams.basic')}</span>
92+
</div>
93+
<div className="flex gap-2">
94+
{checkmarks}
95+
<span className="text-14">{t('index.supportedNetworks.tableLegend.substreams.full')}</span>
96+
</div>
97+
</div>
98+
<div className="border-b border-r border-space-1500 p-4">
99+
<span className="text-c10 mb-2 block text-white">Firehose</span>
100+
<div className="flex gap-2">
101+
{checkmark}
102+
<span className="text-14">{t('index.supportedNetworks.tableLegend.firehose.basic')}</span>
103+
</div>
104+
<div className="flex gap-2">
105+
{checkmarks}
106+
<span className="text-14">{t('index.supportedNetworks.tableLegend.firehose.full')}</span>
107+
</div>
108+
</div>
109+
<div className="p-4">
110+
<span className="text-c10 mb-2 block text-white">Token API</span>
111+
<div className="flex gap-2">
112+
{checkmark}
113+
<span className="text-14">{t('index.supportedNetworks.tableLegend.tokenApi.supported')}</span>
114+
</div>
115+
</div>
116+
</div>
117+
</aside>
118+
61119
<div className="mb-4 flex items-center gap-4">
62120
<div className="flex-grow">
63121
<ExperimentalSearch
@@ -103,9 +161,6 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
103161
<th className="min-w-47">
104162
<Text.C10>{t('index.supportedNetworks.tableHeaders.name')}</Text.C10>
105163
</th>
106-
<th className="min-w-47">
107-
<Text.C10>{t('index.supportedNetworks.tableHeaders.id')}</Text.C10>
108-
</th>
109164
<th align="center">
110165
<Text.C10>{t('index.supportedNetworks.tableHeaders.subgraphs')}</Text.C10>
111166
</th>
@@ -125,26 +180,44 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
125180
className="group/table-row isolate -outline-offset-1 transition hocus-visible-within:bg-space-1600 has-[a:focus-visible]:outline-focus"
126181
>
127182
<td>
128-
<ButtonOrLink href={`/supported-networks/${network.id}`} className="static outline-none">
129-
<span className="flex items-center gap-2">
130-
<NetworkIcon network={network} variant={getIconVariant(network.id)} size={5} />
131-
<span className="text-body-xsmall">{network.shortName}</span>
132-
</span>
133-
<span className="absolute inset-y-0 start-0 z-10 w-[1999px]" />
134-
</ButtonOrLink>
135-
</td>
136-
<td>
137-
<div className="flex items-center justify-between gap-2">
138-
<span className="text-body-xsmall">{network.id}</span>
183+
<div className="static flex items-center justify-between gap-2">
184+
<ButtonOrLink href={`/supported-networks/${network.id}`} className="static outline-none">
185+
<div className="flex items-center gap-3">
186+
<NetworkIcon network={network} variant={getIconVariant(network.id)} size={5} />
187+
<div className="flex flex-col">
188+
<span className="text-body-xsmall leading-5 text-white">{network.shortName}</span>
189+
<span className="text-body-xsmall leading-5 text-space-500">{network.id}</span>
190+
</div>
191+
</div>
192+
<span className="absolute inset-y-0 start-0 z-10 w-[1999px]" />
193+
</ButtonOrLink>
139194
<div className="z-20 shrink-0 opacity-0 transition group-focus-within/table-row:opacity-100 group-hover/table-row:opacity-100">
140195
<ExperimentalCopyButton size="small" variant="tertiary" value={network.id} />
141196
</div>
142197
</div>
143198
</td>
144-
<td align="center">{network.subgraphs ? <Check size={4} alt="Checkmark" /> : null}</td>
145-
<td align="center">{network.substreams ? <Check size={4} alt="Checkmark" /> : null}</td>
146-
<td align="center">{network.firehose ? <Check size={4} alt="Checkmark" /> : null}</td>
147-
<td align="center">{network.tokenApi ? <Check size={4} alt="Checkmark" /> : null}</td>
199+
<td align="center">
200+
{network.subgraphsSupportLevel === 'full'
201+
? checkmarks
202+
: network.subgraphsSupportLevel === 'basic'
203+
? checkmark
204+
: null}
205+
</td>
206+
<td align="center">
207+
{network.substreamsSupportLevel === 'full'
208+
? checkmarks
209+
: network.substreamsSupportLevel === 'basic'
210+
? checkmark
211+
: null}
212+
</td>
213+
<td align="center">
214+
{network.firehoseSupportLevel === 'full'
215+
? checkmarks
216+
: network.firehoseSupportLevel === 'basic'
217+
? checkmark
218+
: null}
219+
</td>
220+
<td align="center">{network.tokenApi ? checkmark : null}</td>
148221
</tr>
149222
))}
150223
</tbody>

‎website/src/supportedNetworks/utils.ts

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NetworksRegistry } from '@pinax/graph-networks-registry'
1+
import { type Network, NetworksRegistry } from '@pinax/graph-networks-registry'
22

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

44+
// Support level for services
45+
export const getSubgraphsSupportLevel = (network: Network) => {
46+
const hasSubgraphs = Boolean(network.services.subgraphs?.length || network.services.sps?.length)
47+
if (!hasSubgraphs) return 'none'
48+
if (network.issuanceRewards) return 'full'
49+
return 'basic'
50+
}
51+
export const getSubstreamsSupportLevel = (network: Network) => {
52+
const substreamCount = network.services.substreams?.length || 0
53+
if (substreamCount === 0) return 'none'
54+
if (substreamCount >= 2) return 'full'
55+
return 'basic'
56+
}
57+
export const getFirehoseSupportLevel = (network: Network) => {
58+
const firehoseCount = network.services.firehose?.length || 0
59+
if (firehoseCount === 0) return 'none'
60+
if (firehoseCount >= 2) return 'full'
61+
return 'basic'
62+
}
63+
4464
export async function getSupportedNetworks() {
4565
const registry = await NetworksRegistry.fromLatestVersion()
4666
return registry.networks
@@ -61,6 +81,10 @@ export async function getSupportedNetworks() {
6181
substreams,
6282
firehose,
6383
tokenApi,
84+
rawNetwork: network,
85+
subgraphsSupportLevel: getSubgraphsSupportLevel(network),
86+
substreamsSupportLevel: getSubstreamsSupportLevel(network),
87+
firehoseSupportLevel: getFirehoseSupportLevel(network),
6488
},
6589
]
6690
})

0 commit comments

Comments
 (0)