Supported Networks: “Subgraph Studio” => “Hosted” + add provider tooltip (#1012)

* Update dependencies

* Supported Networks: “Subgraph Studio” => “Hosted”

+ add provider tooltip + refactoring

Author: benface

package.json

@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "@edgeandnode/eslint-config": "^2.0.3",
-    "@types/node": "^22.16.2",
+    "@types/node": "^22.16.4",
     "eslint": "^8.57.1",
     "eslint-plugin-mdx": "^3.6.2",
     "prettier": "^3.6.2",

pnpm-lock.yaml

@@ -19,22 +19,22 @@
   "dependencies": {
     "@docsearch/react": "^3.9.0",
     "@edgeandnode/common": "^7.0.4",
-    "@edgeandnode/gds": "^6.7.0",
-    "@edgeandnode/go": "^10.3.0",
+    "@edgeandnode/gds": "^6.7.1",
+    "@edgeandnode/go": "^10.3.1",
     "@emotion/react": "^11.14.0",
     "@graphprotocol/contracts": "^7.3.0",
     "@pinax/graph-networks-registry": "^0.7.1",
     "@react-hookz/web": "^25.1.1",
     "@readme/httpsnippet": "^11.0.0",
-    "@readme/openapi-parser": "^4.1.0",
+    "@readme/openapi-parser": "^4.1.1",
     "fetch-har": "^11.1.1",
     "hast": "^1.0.0",
     "hast-util-whitespace": "^3.0.0",
     "lodash": "^4.17.21",
     "mdast-util-mdx-jsx": "^3.2.0",
     "mdast-util-to-hast": "^13.2.0",
     "mixpanel-browser": "^2.66.0",
-    "motion": "^12.23.1",
+    "motion": "^12.23.6",
     "next": "^14.2.30",
     "next-seo": "^6.8.0",
     "next-sitemap": "^4.2.3",
@@ -55,7 +55,7 @@
     "@types/lodash": "^4.17.20",
     "@types/mdast": "^4.0.4",
     "@types/mixpanel-browser": "^2.60.0",
-    "@types/node": "^22.16.2",
+    "@types/node": "^22.16.4",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@types/vfile": "^4.0.0",

website/package.json

@@ -75,19 +75,19 @@
     },
     "tableLegend": {
       "subgraphs": {
-        "basic": "Subgraph Studio (No issuance)",
+        "basic": "Hosted (No issuance)",
         "full": "The Graph Network (Issuance)"
       },
       "substreams": {
         "basic": "Base",
-        "full": "Extended (EVM Only)"
+        "full": "Extended (EVM only)"
       },
       "firehose": {
         "basic": "Base",
-        "full": "Extended (EVM Only)"
+        "full": "Extended (EVM only)"
       },
       "tokenApi": {
-        "supported": "All endpoints supported"
+        "full": "All endpoints supported"
       },
       "icons": {
         "checkmark": "Checkmark",

website/src/pages/en/index.json

@@ -11,21 +11,21 @@ import {
   nonEvmNoTokenAPICards,
   nonEvmWithTokenAPICards,
 } from './ResourceCards'
-import { getIconVariant, type SupportedNetwork } from './utils'
+import { type SupportedNetwork } from './utils'
 
 export default function NetworkDetailsPage({ network }: { network: SupportedNetwork }) {
   const { t } = useI18n()
   const cards = (() => {
     if (network.evm) {
-      if (network.subgraphs && !network.substreams) {
+      if (network.subgraphsSupportLevel !== 'none' && network.substreamsSupportLevel === 'none') {
         return evmSubgraphsOnlyCards
-      } else if (network.tokenApi) {
+      } else if (network.tokenApiSupportLevel !== 'none') {
         return evmWithTokenAPICards
       } else {
         return evmNoTokenAPICards
       }
     } else {
-      if (network.tokenApi) {
+      if (network.tokenApiSupportLevel !== 'none') {
         return nonEvmWithTokenAPICards
       } else {
         return nonEvmNoTokenAPICards
@@ -36,7 +36,7 @@ export default function NetworkDetailsPage({ network }: { network: SupportedNetw
   return (
     <div className="col-[container]">
       <div className="mb-5 mt-12 flex flex-col gap-3">
-        <NetworkIcon network={network} variant={getIconVariant(network.id)} size={10} />
+        <NetworkIcon network={network} variant={network.iconVariant} size={10} />
         <h2 className="leading-tight mt-0 text-24 text-white">{network.fullName}</h2>
       </div>
 

website/src/supportedNetworks/NetworkDetailsPage.tsx

@@ -9,6 +9,7 @@ import {
   ExperimentalSearch,
   ExperimentalToggleChip,
   Text,
+  Tooltip,
   useDebounce,
 } from '@edgeandnode/gds'
 import { Check, Checks, EyeClosed } from '@edgeandnode/gds/icons'
@@ -17,7 +18,7 @@ import { NetworkIcon } from '@edgeandnode/go'
 import { Callout, Table } from '@/components'
 import { useI18n } from '@/i18n'
 
-import { getIconVariant, type SupportedNetwork } from './utils'
+import { type SupportedNetwork } from './utils'
 
 export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
   const { t } = useI18n()
@@ -109,7 +110,7 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
             <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>
+              <span className="text-14">{t('index.supportedNetworks.tableLegend.tokenApi.full')}</span>
             </div>
           </div>
         </div>
@@ -182,7 +183,7 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
                   <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} />
+                        <NetworkIcon network={network} variant={network.iconVariant} 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>
@@ -196,11 +197,13 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
                   </div>
                 </td>
                 <td align="center">
-                  {network.subgraphsSupportLevel === 'full'
-                    ? checkmarks
-                    : network.subgraphsSupportLevel === 'basic'
-                      ? checkmark
-                      : null}
+                  {network.subgraphsSupportLevel === 'full' ? (
+                    checkmarks
+                  ) : network.subgraphsSupportLevel === 'basic' ? (
+                    <Tooltip content={network.subgraphsProvider}>
+                      <span className="z-10">{checkmark}</span>
+                    </Tooltip>
+                  ) : null}
                 </td>
                 <td align="center">
                   {network.substreamsSupportLevel === 'full'
@@ -216,7 +219,7 @@ export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) {
                       ? checkmark
                       : null}
                 </td>
-                <td align="center">{network.tokenApi ? checkmark : null}</td>
+                <td align="center">{network.tokenApiSupportLevel === 'full' ? checkmark : null}</td>
               </tr>
             ))}
           </tbody>

website/src/supportedNetworks/NetworksTable.tsx

@@ -1,7 +1,7 @@
 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 = [
+const MONO_ICON_NETWORKS = [
   'arweave-mainnet',
   'autonomys-taurus',
   'expchain-testnet',
@@ -25,60 +25,83 @@ export const MONO_ICON_NETWORKS = [
   'zksync-era-sepolia',
 ]
 
-export const getIconVariant = (networkId: string): 'mono' | 'branded' => {
-  return MONO_ICON_NETWORKS.includes(networkId) ? 'mono' : 'branded'
-}
-
-// Support level for services
-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'
-}
-
 export async function getSupportedNetworks() {
   const registry = await NetworksRegistry.fromLatestVersion()
   return registry.networks
     .flatMap((network) => {
-      const evm = network.caip2Id.startsWith('eip155:')
-      const subgraphs = Boolean(network.services.subgraphs?.length)
-      const substreams = Boolean(network.services.substreams?.length)
-      const firehose = Boolean(network.services.firehose?.length)
-      const tokenApi = Boolean(network.services.tokenApi?.length)
-      if (!subgraphs && !substreams && !firehose && !tokenApi) {
+      const [subgraphsSupportLevel, subgraphsProvider] = getSubgraphsSupportLevelAndProvider(network)
+      const substreamsSupportLevel = getSubstreamsSupportLevel(network)
+      const firehoseSupportLevel = getFirehoseSupportLevel(network)
+      const tokenApiSupportLevel = getTokenApiSupportLevel(network)
+      if (
+        subgraphsSupportLevel === 'none' &&
+        substreamsSupportLevel === 'none' &&
+        firehoseSupportLevel === 'none' &&
+        tokenApiSupportLevel === 'none'
+      ) {
         return []
       }
       return [
         {
           ...network,
-          evm,
-          subgraphs,
-          substreams,
-          firehose,
-          tokenApi,
-          rawNetwork: network,
-          subgraphsSupportLevel: getSubgraphsSupportLevel(network),
-          substreamsSupportLevel: getSubstreamsSupportLevel(network),
-          firehoseSupportLevel: getFirehoseSupportLevel(network),
+          evm: isEvm(network),
+          iconVariant: getIconVariant(network),
+          subgraphsSupportLevel,
+          subgraphsProvider,
+          substreamsSupportLevel,
+          firehoseSupportLevel,
+          tokenApiSupportLevel,
         },
       ]
     })
     .sort((a, b) => a.fullName.localeCompare(b.fullName))
 }
 
+function isEvm(network: Network) {
+  return network.caip2Id.startsWith('eip155:')
+}
+
+function getIconVariant(network: Network): 'mono' | 'branded' {
+  return MONO_ICON_NETWORKS.includes(network.id) ? 'mono' : 'branded'
+}
+
+function getSubgraphsSupportLevelAndProvider(network: Network): ['none' | 'basic' | 'full', string | null] {
+  const providers = [...new Set([...(network.services.subgraphs || []), ...(network.services.sps || [])])]
+  if (providers.length > 0) {
+    let provider = providers[0]!
+    if (providers.some((provider) => /^((https?:)?\/\/)?api\.studio\.thegraph\.com\//.test(provider))) {
+      provider = 'Subgraph Studio'
+    } else if (providers.some((provider) => /^((https?:)?\/\/)?(www\.)?streamingfast\.io\//.test(provider))) {
+      provider = 'StreamingFast'
+    }
+    if (network.issuanceRewards) {
+      return ['full', provider]
+    }
+    return ['basic', provider]
+  }
+  return ['none', null]
+}
+
+function getSubstreamsSupportLevel(network: Network): 'none' | 'basic' | 'full' {
+  const providerCount = network.services.substreams?.length || 0
+  if (providerCount >= 2) return 'full'
+  if (providerCount === 1) return 'basic'
+  return 'none'
+}
+
+function getFirehoseSupportLevel(network: Network): 'none' | 'basic' | 'full' {
+  const providerCount = network.services.firehose?.length || 0
+  if (providerCount >= 2) return 'full'
+  if (providerCount === 1) return 'basic'
+  return 'none'
+}
+
+function getTokenApiSupportLevel(network: Network): 'none' | 'full' {
+  const providerCount = network.services.tokenApi?.length || 0
+  if (providerCount >= 1) return 'full'
+  return 'none'
+}
+
 export type SupportedNetwork = Awaited<ReturnType<typeof getSupportedNetworks>>[number]
 
 export async function getSupportedNetworksStaticProps() {