Skip to content

Commit 5219db7

Browse files
hayderkghayderkg
committed
general improvements
1 parent d32fa4f commit 5219db7

File tree

3 files changed

+60
-42
lines changed

3 files changed

+60
-42
lines changed

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,12 @@
8888
},
8989
"tokenApi": {
9090
"supported": "All endpoints supported"
91-
}
91+
},
92+
"icons": {
93+
"checkmark": "Checkmark",
94+
"checkmarks": "Checkmarks"
95+
},
96+
"legendTitle": "Table Legend"
9297
}
9398
},
9499
"networkGuides": {

‎website/src/supportedNetworks/NetworksTable.tsx‎

Lines changed: 50 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -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,50 +65,56 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
5865
</p>
5966
</Callout>
6067

61-
<div className="mb-6 overflow-clip rounded-8 border border-space-1500 bg-space-1800">
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>
6275
<div className="grid grid-cols-1 gap-px text-space-500 xs:grid-cols-2">
6376
<div className="border-b border-r border-space-1500 p-4">
64-
<Text.C10 className="mb-2 uppercase text-white">Subgraphs</Text.C10>
65-
<div className="flex items-center gap-2">
66-
<Check size={4} alt="Checkmark" />
77+
<span className="text-c10 mb-2 block text-white">Subgraphs</span>
78+
<div className="flex gap-2">
79+
{checkmark}
6780
<span className="text-14">{t('index.supportedNetworks.tableLegend.subgraphs.basic')}</span>
6881
</div>
69-
<div className="flex items-center gap-2">
70-
<Checks size={4} alt="Checkmarks" />
82+
<div className="flex gap-2">
83+
{checkmarks}
7184
<span className="text-14">{t('index.supportedNetworks.tableLegend.subgraphs.full')}</span>
7285
</div>
7386
</div>
7487
<div className="border-b border-r border-space-1500 p-4 lg:border-r-0">
75-
<Text.C10 className="mb-2 uppercase text-white">Substreams</Text.C10>
76-
<div className="flex items-center gap-2">
77-
<Check size={4} alt="Checkmark" />
88+
<span className="text-c10 mb-2 block text-white">Substreams</span>
89+
<div className="flex gap-2">
90+
{checkmark}
7891
<span className="text-14">{t('index.supportedNetworks.tableLegend.substreams.basic')}</span>
7992
</div>
80-
<div className="flex items-center gap-2">
81-
<Checks size={4} alt="Checkmarks" />
93+
<div className="flex gap-2">
94+
{checkmarks}
8295
<span className="text-14">{t('index.supportedNetworks.tableLegend.substreams.full')}</span>
8396
</div>
8497
</div>
8598
<div className="border-b border-r border-space-1500 p-4">
86-
<Text.C10 className="mb-2 uppercase text-white">Firehose</Text.C10>
87-
<div className="flex items-center gap-2">
88-
<Check size={4} alt="Checkmark" />
99+
<span className="text-c10 mb-2 block text-white">Firehose</span>
100+
<div className="flex gap-2">
101+
{checkmark}
89102
<span className="text-14">{t('index.supportedNetworks.tableLegend.firehose.basic')}</span>
90103
</div>
91-
<div className="flex items-center gap-2">
92-
<Checks size={4} alt="Checkmarks" />
104+
<div className="flex gap-2">
105+
{checkmarks}
93106
<span className="text-14">{t('index.supportedNetworks.tableLegend.firehose.full')}</span>
94107
</div>
95108
</div>
96109
<div className="p-4">
97-
<Text.C10 className="mb-2 uppercase text-white">Token API</Text.C10>
98-
<div className="flex items-center gap-2">
99-
<Check size={4} alt="Checkmark" />
110+
<span className="text-c10 mb-2 block text-white">Token API</span>
111+
<div className="flex gap-2">
112+
{checkmark}
100113
<span className="text-14">{t('index.supportedNetworks.tableLegend.tokenApi.supported')}</span>
101114
</div>
102115
</div>
103116
</div>
104-
</div>
117+
</aside>
105118

106119
<div className="mb-4 flex items-center gap-4">
107120
<div className="flex-grow">
@@ -167,7 +180,7 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
167180
className="group/table-row isolate -outline-offset-1 transition hocus-visible-within:bg-space-1600 has-[a:focus-visible]:outline-focus"
168181
>
169182
<td>
170-
<div className="flex items-center justify-between gap-2">
183+
<div className="static flex items-center justify-between gap-2">
171184
<ButtonOrLink href={`/supported-networks/${network.id}`} className="static outline-none">
172185
<div className="flex items-center gap-3">
173186
<NetworkIcon network={network} variant={getIconVariant(network.id)} size={5} />
@@ -184,27 +197,27 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
184197
</div>
185198
</td>
186199
<td align="center">
187-
{network.subgraphsSupportLevel === 'full' ? (
188-
<Checks size={4} alt="Checkmarks" />
189-
) : network.subgraphsSupportLevel === 'basic' ? (
190-
<Check size={4} alt="Checkmark" />
191-
) : null}
200+
{network.subgraphsSupportLevel === 'full'
201+
? checkmarks
202+
: network.subgraphsSupportLevel === 'basic'
203+
? checkmark
204+
: null}
192205
</td>
193206
<td align="center">
194-
{network.substreamsSupportLevel === 'full' ? (
195-
<Checks size={4} alt="Checkmarks" />
196-
) : network.substreamsSupportLevel === 'basic' ? (
197-
<Check size={4} alt="Checkmark" />
198-
) : null}
207+
{network.substreamsSupportLevel === 'full'
208+
? checkmarks
209+
: network.substreamsSupportLevel === 'basic'
210+
? checkmark
211+
: null}
199212
</td>
200213
<td align="center">
201-
{network.firehoseSupportLevel === 'full' ? (
202-
<Checks size={4} alt="Checkmarks" />
203-
) : network.firehoseSupportLevel === 'basic' ? (
204-
<Check size={4} alt="Checkmark" />
205-
) : null}
214+
{network.firehoseSupportLevel === 'full'
215+
? checkmarks
216+
: network.firehoseSupportLevel === 'basic'
217+
? checkmark
218+
: null}
206219
</td>
207-
<td align="center">{network.tokenApi ? <Check size={4} alt="Checkmark" /> : null}</td>
220+
<td align="center">{network.tokenApi ? checkmark : null}</td>
208221
</tr>
209222
))}
210223
</tbody>

‎website/src/supportedNetworks/utils.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NetworksRegistry } from '@pinax/graph-networks-registry'
1+
import { NetworksRegistry, type Network } 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 = [
@@ -42,22 +42,22 @@ export const getIconVariant = (networkId: string): 'mono' | 'branded' => {
4242
}
4343

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

4848
if (!hasSubgraphs) return 'none'
4949
if (network.issuanceRewards === true) return 'full'
5050
return 'basic'
5151
}
5252

53-
export const getSubstreamsSupportLevel = (network: any): 'none' | 'basic' | 'full' => {
53+
export const getSubstreamsSupportLevel = (network: Network): 'none' | 'basic' | 'full' => {
5454
const substreamCount = network.services.substreams?.length || 0
5555
if (substreamCount === 0) return 'none'
5656
if (substreamCount >= 2) return 'full'
5757
return 'basic'
5858
}
5959

60-
export const getFirehoseSupportLevel = (network: any): 'none' | 'basic' | 'full' => {
60+
export const getFirehoseSupportLevel = (network: Network): 'none' | 'basic' | 'full' => {
6161
const firehoseCount = network.services.firehose?.length || 0
6262
if (firehoseCount === 0) return 'none'
6363
if (firehoseCount >= 2) return 'full'

0 commit comments

Comments
 (0)