diff --git a/package.json b/package.json index 35dab352a4ad..04319a95e43b 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "resolutions": { "@babel/core": "7.26.7", "@uniswap/sdk-core": "7.12.2", - "@uniswap/v3-sdk": "3.29.2" + "@uniswap/v3-sdk": "3.29.2", + "@web3icons/react": "4.1.21" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 65590028360b..b4794a5b7157 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,7 @@ overrides: '@babel/core': 7.26.7 '@uniswap/sdk-core': 7.12.2 '@uniswap/v3-sdk': 3.29.2 + '@web3icons/react': 4.1.21 importers: @@ -109,10 +110,10 @@ importers: version: 7.0.4(hardhat@2.28.6(typescript@5.9.3)) '@edgeandnode/gds': specifier: ^6.9.0 - version: 6.9.0(@emotion/is-prop-valid@0.8.8)(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@theme-ui/core@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(dayjs@1.11.20)(hardhat@2.28.6(typescript@5.9.3))(next@14.2.35(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(theme-ui@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(tsx@4.20.4)(typescript@5.9.3)(yaml@2.8.4) + version: 6.9.0(@emotion/is-prop-valid@0.8.8)(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@theme-ui/core@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(dayjs@1.11.20)(hardhat@2.28.6(typescript@5.9.3))(next@14.2.35(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(theme-ui@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(tsx@4.20.4)(yaml@2.8.4) '@edgeandnode/go': specifier: ^10.5.1 - version: 10.5.1(9dc46ada64931402de22ad7a8d249014) + version: 10.5.1(4271796993286ea0da56583ae6b86c46) '@emotion/react': specifier: ^11.14.0 version: 11.14.0(@types/react@18.3.28)(react@18.3.1) @@ -3370,13 +3371,11 @@ packages: '@vitest/utils@2.1.9': resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==} - '@web3icons/common@0.11.46': - resolution: {integrity: sha512-iwqDpB3sYLuBOM40jSci56Yj6XlkfSOaPRQqYYeGeWYtpsm9K5PVvJaC3bOfZxIYQ9zziu/Ncwm6Ma8bkNh/MA==} - peerDependencies: - typescript: ^5.0.0 + '@web3icons/common@0.11.50': + resolution: {integrity: sha512-mq3Pv4Paq5ikNRR7Yg5ywhLTuQZeseyaGPuAVEUCph+ssn7J6SWPRf8Ze3T2T7TVXy2YpljmVONasBs0+NKX2w==} - '@web3icons/react@4.1.17': - resolution: {integrity: sha512-SNRvgjf+K83urUGjTYKxBKKJFQVozAyvFj6Rxmm8v81p+DbV6gK0RWjcrT/2/BkD5gLVYINdx+ATy0zIT5Vjlg==} + '@web3icons/react@4.1.21': + resolution: {integrity: sha512-MqL6wIy280RQwErHXGboWKzom61iSA4wQKLKIlu03T4pqjBGLa+O++chgihwSblyKCQtEuNBwgkutOvoaDs+jA==} peerDependencies: react: ^18.0.0 || ^19.0.0 @@ -8188,7 +8187,7 @@ snapshots: - eslint-plugin-import-x - supports-color - '@edgeandnode/gds@6.9.0(@emotion/is-prop-valid@0.8.8)(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@theme-ui/core@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(dayjs@1.11.20)(hardhat@2.28.6(typescript@5.9.3))(next@14.2.35(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(theme-ui@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(tsx@4.20.4)(typescript@5.9.3)(yaml@2.8.4)': + '@edgeandnode/gds@6.9.0(@emotion/is-prop-valid@0.8.8)(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@theme-ui/core@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(dayjs@1.11.20)(hardhat@2.28.6(typescript@5.9.3))(next@14.2.35(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(theme-ui@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(tsx@4.20.4)(yaml@2.8.4)': dependencies: '@base-ui-components/react': 1.0.0-alpha.7(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@bramus/style-observer': 2.0.2 @@ -8216,7 +8215,7 @@ snapshots: '@tanem/react-nprogress': 5.0.63(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@theme-ui/css': 0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1)) '@theme-ui/match-media': 0.17.4(@theme-ui/core@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(@theme-ui/css@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1)))(react@18.3.1) - '@web3icons/react': 4.1.17(react@18.3.1)(typescript@5.9.3) + '@web3icons/react': 4.1.21(react@18.3.1) '@xstate/react': 3.2.2(@types/react@18.3.28)(react@18.3.1)(xstate@4.38.3) color: 5.0.3 dayjs: 1.11.20 @@ -8260,15 +8259,14 @@ snapshots: - react-is - supports-color - tsx - - typescript - utf-8-validate - yaml - '@edgeandnode/go@10.5.1(9dc46ada64931402de22ad7a8d249014)': + '@edgeandnode/go@10.5.1(4271796993286ea0da56583ae6b86c46)': dependencies: '@edgeandnode/common': 7.0.4(hardhat@2.28.6(typescript@5.9.3)) '@edgeandnode/ens': 2.3.1(typescript@5.9.3)(viem@2.48.8(typescript@5.9.3)(zod@3.25.76)) - '@edgeandnode/gds': 6.9.0(@emotion/is-prop-valid@0.8.8)(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@theme-ui/core@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(dayjs@1.11.20)(hardhat@2.28.6(typescript@5.9.3))(next@14.2.35(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(theme-ui@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(tsx@4.20.4)(typescript@5.9.3)(yaml@2.8.4) + '@edgeandnode/gds': 6.9.0(@emotion/is-prop-valid@0.8.8)(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@theme-ui/core@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(dayjs@1.11.20)(hardhat@2.28.6(typescript@5.9.3))(next@14.2.35(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(theme-ui@0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react@18.3.1))(tsx@4.20.4)(yaml@2.8.4) '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1) '@graphql-typed-document-node/core': 3.2.0(graphql@16.14.0) '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -8278,7 +8276,7 @@ snapshots: '@react-aria/utils': 3.34.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@tanstack/react-query': 5.100.9(react@18.3.1) '@theme-ui/css': 0.17.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1)) - '@web3icons/react': 4.1.17(react@18.3.1)(typescript@5.9.3) + '@web3icons/react': 4.1.21(react@18.3.1) escape-string-regexp: 5.0.0 graphql: 16.14.0 graphql-request: 7.4.0(graphql@16.14.0) @@ -8294,7 +8292,6 @@ snapshots: - '@types/react' - '@types/react-dom' - tsx - - typescript - yaml '@emnapi/core@1.10.0': @@ -11051,16 +11048,12 @@ snapshots: loupe: 3.2.1 tinyrainbow: 1.2.0 - '@web3icons/common@0.11.46(typescript@5.9.3)': - dependencies: - typescript: 5.9.3 + '@web3icons/common@0.11.50': {} - '@web3icons/react@4.1.17(react@18.3.1)(typescript@5.9.3)': + '@web3icons/react@4.1.21(react@18.3.1)': dependencies: - '@web3icons/common': 0.11.46(typescript@5.9.3) + '@web3icons/common': 0.11.50 react: 18.3.1 - transitivePeerDependencies: - - typescript '@xmldom/xmldom@0.9.10': {} diff --git a/website/src/mdx.d.ts b/website/src/mdx.d.ts new file mode 100644 index 000000000000..a4c52d38fd58 --- /dev/null +++ b/website/src/mdx.d.ts @@ -0,0 +1,8 @@ +// Allow importing `.mdx` files as React components (used for per-network +// custom content on Supported Networks pages). Nextra's MDX loader compiles +// these at build time; this declaration just gives TypeScript a type for them. +declare module '*.mdx' { + import type { ComponentType } from 'react' + const MDXComponent: ComponentType + export default MDXComponent +} diff --git a/website/src/pages/en/about.mdx b/website/src/pages/en/about.mdx index eb34a8776c32..9d005bf3205f 100644 --- a/website/src/pages/en/about.mdx +++ b/website/src/pages/en/about.mdx @@ -5,7 +5,7 @@ description: This page summarizes the core concepts and basics of The Graph Netw ## What is The Graph? -The Graph is a suite of blockchain data infrastructure products that extract, process, and deliver scalable blockchain data solutions across 60+ networks. The Graph enables application developers, data analysts, AI agents, and enterprise teams that need structured, reliable, and real-time access to blockchain data. Products include Subgraphs, Substreams, and Amp. As of early 2026, The Graph has served over 1.27 trillion queries to more than 75,000 projects, powered by 50+ independent Indexer nodes worldwide. +The Graph is a suite of blockchain data infrastructure products that extract, process, and deliver scalable blockchain data solutions across 60+ networks. The Graph enables application developers, data analysts, AI agents, and enterprise teams that need structured, reliable, and real-time access to blockchain data. Products include Subgraphs and Substreams. As of early 2026, The Graph has served over 1.27 trillion queries to more than 75,000 projects, powered by 50+ independent Indexer nodes worldwide. To learn more about The Graph from a non-technical perspective, visit [The Graph Overview](https://thegraph.com/what-is-the-graph/). @@ -25,10 +25,9 @@ Doing this processing on demand is slow, and it forces every developer to build The Graph is a modular protocol whose data services each specialize in a different class of blockchain data problem. Rather than forcing every use case through a single tool, the protocol lets developers choose the right product or service for their use case: -- **Specialized data services for specific use cases:** The protocol supports a spectrum of data services, each optimized for a distinct need. A team can use one service for custom application APIs, another for high-throughput streaming, and another for compliance-grade analytics, all secured by the same network. +- **Specialized data services for specific use cases:** The protocol supports a spectrum of data services, each optimized for a distinct need. A team can use one service for custom application APIs and another for high-throughput streaming, all secured by the same network. - **Subgraphs for resilient, decentralized APIs:** Subgraphs define exactly which contracts, events, and entities to index and how to transform raw on-chain data into structured entities queryable via GraphQL. Because a global network of Indexers serves this data, Subgraphs offer resilience and geographic diversification, with no single point of failure. - **Substreams for real-time scale:** Substreams use parallelized, streaming data processing to index at high throughput and deliver onchain data with low latency. This scales indexing far beyond sequential processing and powers real-time use cases such as live liquidity and trading data. -- **Amp for verifiability and auditability:** Amp provides verifiable, enterprise-grade access to on-chain data with built-in audit trails, meeting the auditability and compliance requirements of regulated institutions. The result: raw, hard-to-access on-chain data becomes fast, structured, and ready to power applications—from a single dapp to institutional-scale systems. @@ -51,12 +50,3 @@ The result: raw, hard-to-access on-chain data becomes fast, structured, and read - [Browse existing Substreams](https://substreams.dev/) - [Build with Substreams](/substreams/overview/) - -### 3. [Amp](https://ampup.sh/docs) - -**Overview:** A blockchain-native database designed to transform onchain activity into enterprise-ready datasets with built-in compliance, auditability, and verifiability. - -**Use Case:** Best for regulated and institutional use cases needing SQL access and built-in audit trails: enterprise analytics, financial reporting, and workflows with regulatory requirements. - -- [Contact Team](https://www.edgeandnode.com/) -- [Get Started with Amp](https://ampup.sh/docs) diff --git a/website/src/supportedNetworks/NetworkDetailsPage.tsx b/website/src/supportedNetworks/NetworkDetailsPage.tsx index 76f3db9f0e6c..e92dfc218cd5 100644 --- a/website/src/supportedNetworks/NetworkDetailsPage.tsx +++ b/website/src/supportedNetworks/NetworkDetailsPage.tsx @@ -1,14 +1,16 @@ import { ExperimentalCopyButton, ExperimentalDescriptionList, ExperimentalLink } from '@edgeandnode/gds' -import { NetworkIcon } from '@edgeandnode/go' import { Card, TimeIcon } from '@/components' import { useI18n } from '@/i18n' +import { customNetworkContent } from './customContent' +import { NetworkIcon } from './NetworkIcon' import { evmCards, evmSubgraphsOnlyCards, nonEvmCards } from './ResourceCards' import { type SupportedNetwork } from './utils' export default function NetworkDetailsPage({ network }: { network: SupportedNetwork }) { const { t } = useI18n() + const CustomContent = customNetworkContent[network.id] const cards = (() => { if (network.evm) { if (network.subgraphsSupportLevel !== 'none' && network.substreamsSupportLevel === 'none') { @@ -77,6 +79,12 @@ export default function NetworkDetailsPage({ network }: { network: SupportedNetw
+ {CustomContent && ( +
+ +
+ )} +

{t('index.supportedNetworks.guides')}

{cards.map((card) => ( diff --git a/website/src/supportedNetworks/NetworkIcon.tsx b/website/src/supportedNetworks/NetworkIcon.tsx new file mode 100644 index 000000000000..4a18106f234e --- /dev/null +++ b/website/src/supportedNetworks/NetworkIcon.tsx @@ -0,0 +1,58 @@ +import type { ComponentProps } from 'react' + +import { ExperimentalIcon } from '@edgeandnode/gds' +import { NetworkIcon as GdsNetworkIcon } from '@edgeandnode/go' + +/** + * Supported Networks icon. + * + * Delegates to the shared `@edgeandnode/go` `NetworkIcon`, which resolves a + * network's logo from the hard-coded icon set (keyed by CAIP-2 id) and, as a + * fallback, from web3icons. Some networks in the registry are in neither set, + * so that component renders an empty icon slot for them. + * + * This wrapper fills those gaps with a locally bundled brand mark. Anubis + * (`eip155:6714` mainnet, `eip155:2526` testnet) is the first such network. + * Add future local-only marks the same way: draw the badge and match on its + * CAIP-2 id (or registry `id`) below. + */ + +type Props = ComponentProps + +const ANUBIS_CAIP2_IDS = new Set(['eip155:6714', 'eip155:2526']) + +function isAnubis(network: Props['network']): boolean { + if (ANUBIS_CAIP2_IDS.has(network.caip2Id)) return true + const id = (network as { id?: string }).id ?? '' + return id === 'anubis' || id.startsWith('anubis-') +} + +/** + * Anubis brand mark on a brand-green badge. The mark artwork lives in + * graph-gtm-kit (design/templates/anubis-chain); the dark "Logo Mark Light" + * ink (#191818) is paired with the brand-green (#87DB00) surface, and the + * paths below are that mark centered in a 40x40 badge. + */ +function AnubisIcon({ alt, size, className, style }: Omit, 'children'>) { + return ( + + + + ) +} + +export function NetworkIcon({ network, ...props }: Props) { + if (isAnubis(network)) { + return + } + return +} +NetworkIcon.isGdsIcon = true diff --git a/website/src/supportedNetworks/NetworksTable.tsx b/website/src/supportedNetworks/NetworksTable.tsx index 800f81d1052a..fd5eb0cc123d 100644 --- a/website/src/supportedNetworks/NetworksTable.tsx +++ b/website/src/supportedNetworks/NetworksTable.tsx @@ -13,11 +13,11 @@ import { useDebounce, } from '@edgeandnode/gds' import { Check, Checks, EyeClosed } from '@edgeandnode/gds/icons' -import { NetworkIcon } from '@edgeandnode/go' import { Callout, Table } from '@/components' import { useI18n } from '@/i18n' +import { NetworkIcon } from './NetworkIcon' import { type SupportedNetwork } from './utils' export function NetworksTable({ networks }: { networks: SupportedNetwork[] }) { diff --git a/website/src/supportedNetworks/customContent/README.md b/website/src/supportedNetworks/customContent/README.md new file mode 100644 index 000000000000..611225e0cd4c --- /dev/null +++ b/website/src/supportedNetworks/customContent/README.md @@ -0,0 +1,33 @@ +# Custom content for Supported Networks pages + +Each Supported Networks landing page (`/supported-networks//`) is generated from the [networks registry](https://networks-registry.thegraph.com) and rendered by `../NetworkDetailsPage.tsx`. By default every page shows the same thing: the network header, a metadata table, and a grid of generic "Guides" cards. + +This folder lets a single network get **custom body content** — a tailored guide, network-specific caveats, code samples — without changing any other network's page. The content is rendered between the metadata table and the Guides cards. + +## Add custom content for a network + +1. Create `.mdx` in this folder, where `` is the network's registry id (the last path segment of its URL, e.g. `anubis` → `/supported-networks/anubis/`). Author it like any other docs page: standard Markdown, tables, code fences, and callouts via GitHub-style alert syntax: + + ```md + > [!NOTE] A neutral, informational callout. [!TIP] A positive tip. [!IMPORTANT] Something the reader must not miss. + ``` + + Use root-relative links for internal docs (e.g. `/subgraphs/querying/introduction/`). Start headings at `##` — the network name is already an `

` on the page. + +2. Register it in `index.ts`: + + ```ts + import MyNetwork from './my-network.mdx' + + export const customNetworkContent: Record = { + anubis: Anubis, + 'my-network': MyNetwork, + } + ``` + +Networks not listed in `index.ts` render the default templated page, unchanged. + +## Notes + +- The `.mdx` is compiled by Nextra's loader as a non-page import, so the same remark plugins (callouts, etc.) and MDX component styling used across the docs apply automatically — the content looks native to the site. +- The page only exists if the network is present in the **published** registry that the build fetches. Custom content here does not create the page; it only enriches a page that the registry already generates. diff --git a/website/src/supportedNetworks/customContent/anubis.mdx b/website/src/supportedNetworks/customContent/anubis.mdx new file mode 100644 index 000000000000..8dd054cf3d3f --- /dev/null +++ b/website/src/supportedNetworks/customContent/anubis.mdx @@ -0,0 +1,188 @@ +## Indexing Anubis with Subgraphs + +Getting historical data off a smart contract is hard. You write your own indexer, run your own database, and handle chain reorganizations yourself. The Graph removes that work. It gives you an open API, called a Subgraph, that you query with GraphQL. + +Anubis is EVM-compatible, so the Subgraph workflow is the same as on most EVM chains. You point a Subgraph at your Anubis contract, define the entities you want, and Indexers on The Graph Network keep those entities current and queryable. + +> [!NOTE] Anubis is a selective-privacy chain. A Subgraph can only index data that is public on-chain. Transparent transactions, and the events they emit, are fully indexable. Data inside shielded (PLONK ZK) transactions is not visible on-chain, so it cannot be indexed. Design your contract's public events with this in mind if you want that data to be queryable. + +## Anubis network reference + +| Parameter | Mainnet | Testnet | +| ------------ | --------------------- | ---------------- | +| Network name | ANUBIS Mainnet | ANUBIS Testnet | +| Chain ID | `6714` (`0x1a3a`) | `2526` (`0x9de`) | +| Gas token | `gasDAI` (DAI-pegged) | `ANUBI` | + +## Quick start + +Building a Subgraph for Anubis takes three steps: + +1. Initialize a Subgraph project from your Anubis contract. +2. Publish it to The Graph Network for decentralized indexing. +3. Query it over GraphQL with an API key. + +See the [Subgraph pricing page](https://thegraph.com/studio-pricing/) for current query rates and free-tier limits. + +> [!NOTE] Anubis is supported on The Graph Network, but does not currently have Subgraph Studio testing/staging support. Skip the standard `graph deploy` and Studio playground path. Instead, you can validate your Subgraph locally (see below) or publish directly to The Graph Network, where a decentralized Indexer that supports Anubis indexes it. + +### Step 1: Initialize your Subgraph project + +Install the Graph CLI with the package manager you prefer: + +```sh +# npm +npm install -g @graphprotocol/graph-cli@latest + +# or yarn +yarn global add @graphprotocol/graph-cli +``` + +Verify the install: + +```sh +graph --version +``` + +Initialize from your Anubis contract: + +```sh +graph init +``` + +The CLI walks you through a set of prompts. Anubis is a custom EVM network, so provide the network details manually when asked: + +- **Protocol**: choose `ethereum`. Anubis is EVM-compatible. +- **Subgraph slug**: an identifier for your Subgraph, for example `my-anubis-subgraph`. +- **Directory**: where the project is scaffolded. +- **Ethereum network**: enter `anubis` as the network identifier. +- **Contract address**: the address of the contract you want to index. Find it on [browser.anubispace.org](https://browser.anubispace.org). +- **ABI**: if the CLI cannot fetch the ABI, export it from your build artifacts or the Blockscout contract page. Supply it as a JSON file. +- **Start block**: the block your contract was deployed at. Set this so indexing does not scan from genesis. The explorer shows the deployment block. +- **Contract name**: the name of your contract. +- **Index contract events as entities**: set this to `true`. The CLI then scaffolds entities and mappings for every emitted event. + +> [!NOTE] The `network` value you enter (`anubis`) must match the network identifier that The Graph has registered for Anubis. If `graph init` does not recognize the network, scaffold with any EVM network and set the `network` field manually in `subgraph.yaml` (next step). + +### Step 2: Write and build your Subgraph + +You work with three files: + +- **Manifest** (`subgraph.yaml`): defines which data sources your Subgraph indexes. +- **Schema** (`schema.graphql`): defines the entities you want to query. +- **Mappings** (`src/mapping.ts`): AssemblyScript that translates on-chain events into your entities. + +Point the manifest at Anubis: + +```yaml +dataSources: + - kind: ethereum + name: MyContract + network: anubis # must match The Graph's Anubis network identifier + source: + address: '0xYourAnubisContractAddress' + abi: MyContract + startBlock: 123456 # your contract's deployment block +``` + +For a full walkthrough of schema and mapping authoring, see [Creating a Subgraph](/subgraphs/developing/creating/starting-your-subgraph/). + +Generate types and build: + +```sh +graph codegen && graph build +``` + +**Optional: verify locally before publishing.** The Studio playground cannot index Anubis, so test indexing with a local [Graph Node](https://github.com/graphprotocol/graph-node) pointed at an Anubis RPC endpoint. In your `docker-compose.yml`, set the Ethereum environment to your Anubis network: + +```yaml +environment: + ethereum: 'anubis:https://rpc.anubispace.org' +``` + +Create and deploy to your local node: + +```sh +graph create --node http://localhost:8020/ my-anubis-subgraph +graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 my-anubis-subgraph +``` + +Query the local endpoint until your entities look right, then publish. + +### Step 3: Publish to The Graph Network + +This is the recommended path for Anubis. Publishing is an on-chain action that: + +- makes your Subgraph available for decentralized [Indexers](/indexing/overview/) that support Anubis to index, +- makes it publicly searchable and queryable in [Graph Explorer](https://thegraph.com/explorer/), +- and makes it available for [Curators](/resources/roles/curating/) to add signal. + +Build, then publish from the Graph CLI: + +```sh +graph codegen && graph build +graph publish +``` + +A browser window opens. Connect your wallet, add metadata (name, description, image), and publish your Subgraph. The `--protocol-network` flag refers to where The Graph's protocol contracts live (Arbitrum One), not to Anubis. + +> [!TIP] During the publish transaction, you can add 500 GRT in curation signal to save on gas fees. Signal tells Indexers that your Subgraph is worth indexing. Any Subgraph with 500 GRT or more signal will automatically be indexed; without signal, no Indexer is incentivized to pick up your Subgraph. + +### Step 4: Query your Subgraph + +After you publish, open your Subgraph in [Graph Explorer](https://thegraph.com/explorer/) and copy its query URL from the **Query** button. + +1. Create an API key from the API Keys dashboard at [thegraph.com/studio](https://thegraph.com/studio/). This dashboard handles keys and billing for The Graph Network on Arbitrum, independent of which chains Studio can index. +2. Send GraphQL queries to the query URL with your API key. + +See the [Subgraph pricing page](https://thegraph.com/studio-pricing/) for query rates, and [Querying The Graph](/subgraphs/querying/introduction/) for the full query API. + +## Appendix + +### Sample GraphQL query + +```graphql +{ + transfers(first: 5, orderBy: blockNumber, orderDirection: desc) { + id + from + to + value + blockNumber + } +} +``` + +### Querying from JavaScript + +```js +const query = ` + { + transfers(first: 5, orderBy: blockNumber, orderDirection: desc) { + id + from + to + value + blockNumber + } + } +` + +const res = await fetch('https://gateway.thegraph.com/api//subgraphs/id/', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ query }), +}) + +const { data } = await res.json() +console.log(data.transfers) +``` + +### Resources + +- [The Graph: Subgraphs overview](/subgraphs/developing/introduction/) +- [Creating a Subgraph](/subgraphs/developing/creating/starting-your-subgraph/) +- [Publishing a Subgraph](/subgraphs/developing/publishing/publishing-a-subgraph/) +- [Querying The Graph](/subgraphs/querying/introduction/) +- [Graph Explorer](https://thegraph.com/explorer/) +- [Anubis Network docs](https://anubis-network.gitbook.io/anubis-network) and [ChainList (6714)](https://chainlist.org/chain/6714) diff --git a/website/src/supportedNetworks/customContent/index.ts b/website/src/supportedNetworks/customContent/index.ts new file mode 100644 index 000000000000..bc70acafa89d --- /dev/null +++ b/website/src/supportedNetworks/customContent/index.ts @@ -0,0 +1,20 @@ +import type { ComponentType } from 'react' + +import Anubis from './anubis.mdx' + +/** + * Per-network custom content for Supported Networks landing pages. + * + * Keyed by the network `id` from the networks registry (e.g. `anubis`, + * matching `/supported-networks/anubis/`). Each value is an MDX document, + * authored exactly like the rest of the docs (callouts, tables, code blocks), + * that `NetworkDetailsPage` renders below the metadata section. + * + * To give another network a custom landing page: + * 1. Add `src/supportedNetworks/customContent/.mdx`. + * 2. Import it here and add it to the map below. + * Networks not listed here render the default templated page, unchanged. + */ +export const customNetworkContent: Record = { + anubis: Anubis, +} diff --git a/website/src/supportedNetworks/index.ts b/website/src/supportedNetworks/index.ts index 538545e9a757..b8534517c703 100644 --- a/website/src/supportedNetworks/index.ts +++ b/website/src/supportedNetworks/index.ts @@ -1,3 +1,4 @@ export * from './NetworkDetailsPage' +export * from './NetworkIcon' export * from './NetworksTable' export * from './utils'