Skip to content

Commit ba4661a

Browse files
hayderkghayderkg
committed
General improvements
1 parent b742a4d commit ba4661a

7 files changed

Lines changed: 90 additions & 112 deletions

File tree

‎pnpm-lock.yaml‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@docsearch/react": "^3.9.0",
2020
"@edgeandnode/common": "^7.0.4",
2121
"@edgeandnode/gds": "^6.5.12",
22-
"@edgeandnode/go": "^9.4.12",
22+
"@edgeandnode/go": "^9.4.13",
2323
"@emotion/react": "^11.14.0",
2424
"@graphprotocol/contracts": "6.2.1",
2525
"@pinax/graph-networks-registry": "^0.6.7",

‎website/src/pages/[locale]/supported-networks/[id].mdx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,13 @@ import { getSupportedNetworks } from '@/supportedNetworks'
88

99
export const getStaticPaths = async () => {
1010
const networks = await getSupportedNetworks()
11-
const paths = []
12-
for (const locale of supportedLocales) {
13-
for (const network of networks) {
14-
paths.push({
15-
params: { locale, id: network.id },
16-
})
17-
}
18-
}
19-
return {
20-
paths,
21-
fallback: false,
22-
}
23-
}
11+
const paths = supportedLocales.flatMap((locale) =>
12+
networks.map((network) => ({
13+
params: { locale, id: network.id },
14+
}))
15+
)
16+
17+
return { paths, fallback: false } }
2418

2519
export const getStaticProps = async ({ params }) => {
2620
const { locale, id } = params

‎website/src/supportedNetworks/components/NetworkPage.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,7 @@ export const NetworkPage = memo(({ network }: NetworkPageProps) => {
9090
)}
9191
{networkData.docsUrl && (
9292
<ExperimentalDescriptionList.Item label={t('index.supportedNetworks.docs')}>
93-
<ExperimentalLink
94-
className="text-p14"
95-
href={networkData.docsUrl}
96-
target="_blank"
97-
rel="noopener noreferrer"
98-
>
93+
<ExperimentalLink className="text-p14" href={networkData.docsUrl} target="_blank">
9994
{networkData.docsUrl}
10095
</ExperimentalLink>
10196
</ExperimentalDescriptionList.Item>

‎website/src/supportedNetworks/components/NetworkRow.tsx‎

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,12 @@ import { motion } from 'framer-motion'
22
import NextLink from 'next/link'
33
import { memo } from 'react'
44

5-
import { ExperimentalCopyButton, Skeleton, Text } from '@edgeandnode/gds'
5+
import { ExperimentalCopyButton, Skeleton } from '@edgeandnode/gds'
66
import { Check } from '@edgeandnode/gds/icons'
77
import { NetworkIcon } from '@edgeandnode/go'
88

99
import { getIconVariant, shouldShowSkeleton } from '@/supportedNetworks/utils'
1010

11-
const MotionTR = motion.tr
12-
1311
interface NetworkRowProps {
1412
network: {
1513
id: string
@@ -25,55 +23,58 @@ interface NetworkRowProps {
2523

2624
export const NetworkRow = memo(({ network, locale }: NetworkRowProps) => {
2725
return (
28-
<NextLink href={`/${locale}/supported-networks/${network.id}`} legacyBehavior passHref>
29-
<MotionTR
30-
className="group h-16 cursor-pointer transition-colors hover:bg-space-1600"
31-
initial={{ opacity: 0, y: 16 }}
32-
animate={{ opacity: 1, y: 0 }}
33-
exit={{
34-
opacity: 0,
35-
y: -16,
36-
transition: {
37-
duration: 0.1,
38-
ease: 'easeIn',
39-
},
40-
}}
41-
transition={{
42-
duration: 0.2,
43-
ease: 'easeOut',
44-
}}
45-
layoutId={network.id}
46-
>
47-
<td className="w-48">
26+
<motion.tr
27+
className="group h-16 cursor-pointer transition-colors hover:bg-space-1600"
28+
initial={{ opacity: 0, y: 16 }}
29+
animate={{ opacity: 1, y: 0 }}
30+
exit={{
31+
opacity: 0,
32+
y: -16,
33+
transition: {
34+
duration: 0.1,
35+
ease: 'easeIn',
36+
},
37+
}}
38+
transition={{
39+
duration: 0.2,
40+
ease: 'easeOut',
41+
}}
42+
layoutId={network.id}
43+
>
44+
<td className="static min-w-48">
45+
<NextLink
46+
href={`/${locale}/supported-networks/${network.id}`}
47+
className="absolute inset-0 z-10 flex size-full items-center px-3.5 py-2.5 -outline-offset-2"
48+
>
4849
<div className="flex items-center gap-2">
4950
{shouldShowSkeleton(network.id) ? (
5051
<Skeleton borderRadius="FULL" height="20px" width="20px" />
5152
) : (
5253
<NetworkIcon variant={getIconVariant(network.id)} caip2Id={network.caip2Id as any} size={5} />
5354
)}
54-
<Text.P14>{network.shortName}</Text.P14>
55+
<span className="text-p14">{network.shortName}</span>
5556
</div>
56-
</td>
57-
<td className="w-48">
58-
<div className="flex w-full items-center justify-between gap-2">
59-
<Text.P14 className="!mb-0">{network.id}</Text.P14>
60-
<div className="opacity-0 transition-opacity group-hover:opacity-100">
61-
<div
62-
onClick={(e) => {
63-
e.preventDefault()
64-
e.stopPropagation()
65-
}}
66-
>
67-
<ExperimentalCopyButton size="small" variant="tertiary" value={network.id} />
68-
</div>
57+
</NextLink>
58+
</td>
59+
<td className="w-48">
60+
<div className="flex w-full items-center justify-between gap-2">
61+
<span className="text-p14 !mb-0">{network.id}</span>
62+
<div className="z-20 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100">
63+
<div
64+
onClick={(e) => {
65+
e.preventDefault()
66+
e.stopPropagation()
67+
}}
68+
>
69+
<ExperimentalCopyButton size="small" variant="tertiary" value={network.id} />
6970
</div>
7071
</div>
71-
</td>
72-
<td align="center">{network.subgraphs ? <Check size={4} alt="Checkmark" /> : null}</td>
73-
<td align="center">{network.substreams ? <Check size={4} alt="Checkmark" /> : null}</td>
74-
<td align="center">{network.firehose ? <Check size={4} alt="Checkmark" /> : null}</td>
75-
<td align="center">{network.tokenapi ? <Check size={4} alt="Checkmark" /> : null}</td>
76-
</MotionTR>
77-
</NextLink>
72+
</div>
73+
</td>
74+
<td align="center">{network.subgraphs ? <Check size={4} alt="Checkmark" /> : null}</td>
75+
<td align="center">{network.substreams ? <Check size={4} alt="Checkmark" /> : null}</td>
76+
<td align="center">{network.firehose ? <Check size={4} alt="Checkmark" /> : null}</td>
77+
<td align="center">{network.tokenapi ? <Check size={4} alt="Checkmark" /> : null}</td>
78+
</motion.tr>
7879
)
7980
})

‎website/src/supportedNetworks/index.tsx‎

Lines changed: 29 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { NetworksRegistry } from '@pinax/graph-networks-registry'
22
import { useRouter } from 'next/router'
3-
import { useCallback, useMemo, useState } from 'react'
3+
import { useMemo, useState } from 'react'
44

55
import { ExperimentalLink } from '@edgeandnode/gds'
66

@@ -57,60 +57,49 @@ export function SupportedNetworksTable({
5757

5858
const noResults = filteredNetworks.length === 0 && searchQuery !== ''
5959

60-
const handleClearSearch = useCallback(() => {
61-
setSearchQuery('')
62-
}, [])
63-
64-
const handleShowTestnets = useCallback(() => {
65-
if (noResults) {
66-
setSearchQuery('')
67-
}
68-
setShowTestnets(true)
69-
}, [noResults])
70-
71-
const handleHideTestnets = useCallback(() => {
72-
setShowTestnets(false)
73-
}, [])
74-
75-
const handleToggleTestnets = useCallback(() => {
76-
if (!showTestnets) {
77-
handleShowTestnets()
78-
} else {
79-
handleHideTestnets()
80-
}
81-
}, [showTestnets, handleShowTestnets, handleHideTestnets])
82-
83-
const setSearchQueryCallback = useCallback((value: string) => {
84-
setSearchQuery(value)
85-
}, [])
86-
8760
return (
8861
<>
89-
<Callout variant="info" className="mb-6 flex items-center">
90-
<span className="text-p14">
91-
{t('index.supportedNetworks.infoText')}{' '}
92-
<ExperimentalLink href="https://thegraph.com/docs/en/indexing/chain-integration-overview/">
93-
{t('index.supportedNetworks.infoLink')}
94-
</ExperimentalLink>
95-
.
96-
</span>
62+
<Callout variant="info" className="mb-6">
63+
{t('index.supportedNetworks.infoText')}{' '}
64+
<ExperimentalLink href="https://thegraph.com/docs/en/indexing/chain-integration-overview/">
65+
{t('index.supportedNetworks.infoLink')}
66+
</ExperimentalLink>
67+
.
9768
</Callout>
9869

9970
<NetworkFilters
10071
searchQuery={searchQuery}
101-
setSearchQuery={setSearchQueryCallback}
72+
setSearchQuery={setSearchQuery}
10273
showTestnets={showTestnets}
103-
onToggleTestnets={handleToggleTestnets}
74+
onToggleTestnets={() => {
75+
if (!showTestnets) {
76+
if (noResults) {
77+
setSearchQuery('')
78+
}
79+
setShowTestnets(true)
80+
} else {
81+
setShowTestnets(false)
82+
}
83+
}}
10484
/>
10585

10686
{filteredNetworks.length > 0 ? (
10787
<NetworksTable networks={filteredNetworks} isLoading={false} locale={locale} />
10888
) : (
10989
<EmptySearchResults
11090
searchQuery={searchQuery}
111-
onClearSearch={handleClearSearch}
91+
onClearSearch={() => setSearchQuery('')}
11292
showTestnets={showTestnets}
113-
onToggleTestnets={handleToggleTestnets}
93+
onToggleTestnets={() => {
94+
if (!showTestnets) {
95+
if (noResults) {
96+
setSearchQuery('')
97+
}
98+
setShowTestnets(true)
99+
} else {
100+
setShowTestnets(false)
101+
}
102+
}}
114103
/>
115104
)}
116105
</>

‎website/src/supportedNetworks/utils.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,8 @@ export const MONO_ICON_NETWORKS = [
2323
'megaeth-testnet',
2424
]
2525

26-
// TODO(@hayderkg, @benface): Add network icons to GDS for these networks
27-
// Skeleton networks (no icon available)
28-
export const MISSING_ICON_NETWORKS = ['ink-sepolia']
26+
// TODO(@hayderkg, @benface, @0xa3k5): Add network icons to GDS for these networks
27+
export const MISSING_ICON_NETWORKS: string[] = []
2928

3029
// Networks with Token API support (TODO: remove once the registry has this information)
3130
export const TOKEN_API_NETWORKS = ['mainnet', 'base', 'bsc', 'arbitrum-one', 'matic', 'optimism']

0 commit comments

Comments
 (0)