feat: add interactive HyperSync query builder component and documentation #670
Conversation
…tion - Introduced the `hypersync-query-builder-component` to enhance query building capabilities. - Added `HyperSyncQueryBuilderWrapper` component for integration. - Created documentation for the interactive query builder, detailing its features and usage. - Updated `package.json`, `yarn.lock`, and CSS styles to support the new component. - Included new sidebar entry for easy navigation to the query builder documentation.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update introduces new documentation files for several supported networks (Chainweb Testnet 20/21, Plume, Taraxa), updates network listings and tiers in documentation, and adds a new "Interactive Query Builder" tool for HyperSync. Supporting changes include a new React component, related CSS, package dependency, sidebar entry, and updates to network configuration files. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Docs Site
participant HyperSyncQueryBuilderWrapper
participant HyperSyncQueryBuilder
User->>Docs Site: Navigates to Interactive Query Builder page
Docs Site->>HyperSyncQueryBuilderWrapper: Render wrapper component
HyperSyncQueryBuilderWrapper->>HyperSyncQueryBuilder: Render Query Builder UI
User->>HyperSyncQueryBuilder: Builds and executes queries interactively
HyperSyncQueryBuilder-->>User: Displays results in real time
Estimated code review effort2 (~15 minutes) Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (10)
package.json (1)
24-38: Double-check new dependency & lock-file hygiene
hypersync-query-builder-componentis now pinned to0.2.1.
Please verify:
- Compatibility with Node 18 / React 18 used in this repo.
- Licence & supply-chain health (no recent advisories).
- Whether a caret (
^0.2.1) is preferable to receive backward-compatible patch updates automatically.- "hypersync-query-builder-component": "0.2.1", + "hypersync-query-builder-component": "^0.2.1",If reproducible builds are critical, keep the hard pin but commit the refreshed
yarn.lock/package-lock.json.You may also want to audit the mixed Docusaurus major versions (
^3.3.2packages +docusaurus^1.14.7) as that combination looks accidental and could break the build pipeline.src/css/custom.css (1)
43-64:all: revertlacks broad browser support – add a safe fallbackSafari ≤ 15 & older Chromium do not fully support the
revertkeyword.
Consider adding a second declaration so unsupported browsers at least fall back to UA-defaults:.hypersync-query-builder-wrapper button { - all: revert; + all: revert; + /* Fallback for browsers without `revert` support */ + all: initial; + font: inherit; }Apply the same pattern to the
input / select / textareablock to avoid style drift.docs/HyperSync/HyperRPC/hyperrpc-url-endpoints.md (1)
80-96: Address markdownlint “bare-url” warnings for new rowsStatic analysis flags these lines (MD034).
Minor, but you can silence the linter by wrapping plain URLs in<>:-| Plume | 98866 | https://plume.rpc.hypersync.xyz or https://98866.rpc.hypersync.xyz | | +| Plume | 98866 | <https://plume.rpc.hypersync.xyz> or <https://98866.rpc.hypersync.xyz> | |Same for Tangle and Taraxa rows.
src/components/HyperSyncQueryBuilderWrapper.jsx (1)
10-15: Move inline styles into CSS for re-use & i18n themingHard-coding colours/borders inline makes dark-mode & future design tweaks painful. Prefer a scoped CSS class or Tailwind utility classes instead of the inline object.
docs/HyperSync/hypersync-supported-networks.md (3)
49-50: Wrap bare URLs in angle-brackets to satisfy MD034Markdown-lint flags the two new Chainweb Testnet rows. Simply surround each naked URL with
<…>or convert to[link](url)to silence the warning and improve rendering in some engines.
88-88: Same bare-URL issue for Plume rowApply the same fix (
<https://plume.hypersync.xyz>) for consistency and to pass lint checks.
103-104: Taraxa & Tangle rows – duplicate lint warningWrap the four URLs with angle brackets or reference-style links to keep the doc lint-clean.
docs/HyperIndex/supported-networks/taraxa.md (1)
42-53: Clarify placeholder values in YAML snippet
START_BLOCK_NUMBER,ContractName,Eventare placeholders. Readers sometimes paste this verbatim and run into errors. Add# TODOcomments or an italic note above the block reminding users to replace the placeholders.# ⚠️ Replace the placeholders below before running start_block: <FIRST_BLOCK_TO_INDEX>docs/HyperIndex/supported-networks/plume.md (1)
42-53: Add placeholder disclaimer analogous to other docsSame comment as Taraxa: call out the placeholders so users don’t attempt to deploy with invalid values.
docs/HyperSync/hypersync-query-creator.mdx (1)
113-117: Discord link inconsistencyElsewhere in the docs you reference
https://discord.com/invite/Q9qt8gZ2fX; here you usehttps://discord.gg/envio. For coherence and to avoid dead invites, standardise to a single URL.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (13)
docs/HyperIndex/supported-networks/chainweb-testnet-20.md(1 hunks)docs/HyperIndex/supported-networks/chainweb-testnet-21.md(1 hunks)docs/HyperIndex/supported-networks/plume.md(1 hunks)docs/HyperIndex/supported-networks/tangle.md(1 hunks)docs/HyperIndex/supported-networks/taraxa.md(1 hunks)docs/HyperSync/HyperRPC/hyperrpc-url-endpoints.md(3 hunks)docs/HyperSync/hypersync-query-creator.mdx(1 hunks)docs/HyperSync/hypersync-supported-networks.md(3 hunks)package.json(1 hunks)sidebarsHyperSync.js(1 hunks)src/components/HyperSyncQueryBuilderWrapper.jsx(1 hunks)src/css/custom.css(1 hunks)supported-networks.json(1 hunks)
🪛 markdownlint-cli2 (0.17.2)
docs/HyperSync/HyperRPC/hyperrpc-url-endpoints.md
41-41: Bare URL used
(MD034, no-bare-urls)
41-41: Bare URL used
(MD034, no-bare-urls)
42-42: Bare URL used
(MD034, no-bare-urls)
42-42: Bare URL used
(MD034, no-bare-urls)
80-80: Bare URL used
(MD034, no-bare-urls)
80-80: Bare URL used
(MD034, no-bare-urls)
95-95: Bare URL used
(MD034, no-bare-urls)
95-95: Bare URL used
(MD034, no-bare-urls)
96-96: Bare URL used
(MD034, no-bare-urls)
96-96: Bare URL used
(MD034, no-bare-urls)
docs/HyperSync/hypersync-supported-networks.md
49-49: Bare URL used
(MD034, no-bare-urls)
49-49: Bare URL used
(MD034, no-bare-urls)
50-50: Bare URL used
(MD034, no-bare-urls)
50-50: Bare URL used
(MD034, no-bare-urls)
88-88: Bare URL used
(MD034, no-bare-urls)
88-88: Bare URL used
(MD034, no-bare-urls)
103-103: Bare URL used
(MD034, no-bare-urls)
103-103: Bare URL used
(MD034, no-bare-urls)
104-104: Bare URL used
(MD034, no-bare-urls)
104-104: Bare URL used
(MD034, no-bare-urls)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
docs/HyperSync/HyperRPC/hyperrpc-url-endpoints.md
41-41: Bare URL used
(MD034, no-bare-urls)
41-41: Bare URL used
(MD034, no-bare-urls)
42-42: Bare URL used
(MD034, no-bare-urls)
42-42: Bare URL used
(MD034, no-bare-urls)
80-80: Bare URL used
(MD034, no-bare-urls)
80-80: Bare URL used
(MD034, no-bare-urls)
95-95: Bare URL used
(MD034, no-bare-urls)
95-95: Bare URL used
(MD034, no-bare-urls)
96-96: Bare URL used
(MD034, no-bare-urls)
96-96: Bare URL used
(MD034, no-bare-urls)
docs/HyperSync/hypersync-supported-networks.md
49-49: Bare URL used
(MD034, no-bare-urls)
49-49: Bare URL used
(MD034, no-bare-urls)
50-50: Bare URL used
(MD034, no-bare-urls)
50-50: Bare URL used
(MD034, no-bare-urls)
88-88: Bare URL used
(MD034, no-bare-urls)
88-88: Bare URL used
(MD034, no-bare-urls)
103-103: Bare URL used
(MD034, no-bare-urls)
103-103: Bare URL used
(MD034, no-bare-urls)
104-104: Bare URL used
(MD034, no-bare-urls)
104-104: Bare URL used
(MD034, no-bare-urls)
🔇 Additional comments (10)
docs/HyperIndex/supported-networks/tangle.md (1)
22-22: Tier update looks goodTier text changed to “STONE 🪨”. No technical issues detected; ensure any cross-references (pricing/tier tables) are updated in lock-step.
sidebarsHyperSync.js (1)
5-5: Sidebar entry verified – slug existsThe document
docs/HyperSync/hypersync-query-creator.mdxwas found, so the sidebar link"hypersync-query-creator"is valid. No further changes are needed.docs/HyperSync/HyperRPC/hyperrpc-url-endpoints.md (1)
41-42: Confirm unique network IDs for new Chainweb testnetsIDs 5920 & 5921 are added; make sure they don’t collide with any other chain IDs in other docs or backend config.
src/components/HyperSyncQueryBuilderWrapper.jsx (1)
2-3: Double-check import paths for CSS assetsMany component packages export their stylesheet under a sub-path such as
dist/styles.css(or similar). Ifhypersync-query-builder-component/stylesdoes not resolve, the docs build will fail in CI/SSR.
Confirm the path or switch to an explicit file (…/styles.css) to avoid a runtime “Cannot find module” error.docs/HyperIndex/supported-networks/chainweb-testnet-21.md (2)
24-30: Broken internal link suspicion
/docs/HyperSync/overview-hyperrpcis referenced, but the HyperRPC overview lives underHyperSync/HyperRPC/…in the existing doc tree. Please verify the route; otherwise users will hit a 404.
14-16: Confirm Chain ID accuracyChainweb traditionally numbers chains 0-19 for mainnet/testnet. Using
5921for “Chainweb Testnet 21” may be a custom mapping. Double-check the ID and endpoint before publishing.docs/HyperIndex/supported-networks/chainweb-testnet-20.md (2)
24-30: HyperRPC link consistencySame potential 404 as in the Testnet-21 doc – ensure the
overview-hyperrpcpath exists or adjust.
14-16: Verify Chain ID 5920Please confirm this is the intended numeric ID for Chainweb Testnet 20; a mismatch will confuse users and break endpoints.
docs/HyperSync/hypersync-query-creator.mdx (2)
8-9: Component import path – build will fail if file is misplaced
@site/src/components/HyperSyncQueryBuilderWrappermust exist relative to the Docusaurus root. Double-check case-sensitivity and extension (.jsxvs.tsx) to avoid MDX compile errors.
78-94: Admonition blocks render correctly only inside MDX “:::tip” fencesGood use of Docusaurus admonitions. No issues spotted.
| ```yaml | ||
| name: IndexerName # Specify indexer name | ||
| description: Indexer Description # Include indexer description | ||
| networks: | ||
| - id: 5920 # Chainweb Testnet 20 | ||
| start_block: START_BLOCK_NUMBER # Specify the starting block | ||
| contracts: | ||
| - name: ContractName | ||
| address: | ||
| - "0xYourContractAddress1" | ||
| - "0xYourContractAddress2" | ||
| handler: ./src/EventHandlers.ts | ||
| events: | ||
| - event: Event # Specify event | ||
| - event: Event | ||
| ``` |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Same indentation bug in YAML snippet
The address list items need two more spaces:
- address:
- - "0xYourContractAddress1"
- - "0xYourContractAddress2"
+ address:
+ - "0xYourContractAddress1"
+ - "0xYourContractAddress2"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ```yaml | |
| name: IndexerName # Specify indexer name | |
| description: Indexer Description # Include indexer description | |
| networks: | |
| - id: 5920 # Chainweb Testnet 20 | |
| start_block: START_BLOCK_NUMBER # Specify the starting block | |
| contracts: | |
| - name: ContractName | |
| address: | |
| - "0xYourContractAddress1" | |
| - "0xYourContractAddress2" | |
| handler: ./src/EventHandlers.ts | |
| events: | |
| - event: Event # Specify event | |
| - event: Event | |
| ``` |
🤖 Prompt for AI Agents
In docs/HyperIndex/supported-networks/chainweb-testnet-20.md between lines 38
and 53, the YAML snippet has incorrect indentation for the address list items
under contracts. The list items under address should be indented two more spaces
to align properly with YAML syntax. Adjust the indentation of the address
entries so they are correctly nested under the address key.
| ```yaml | ||
| name: IndexerName # Specify indexer name | ||
| description: Indexer Description # Include indexer description | ||
| networks: | ||
| - id: 5921 # Chainweb Testnet 21 | ||
| start_block: START_BLOCK_NUMBER # Specify the starting block | ||
| contracts: | ||
| - name: ContractName | ||
| address: | ||
| - "0xYourContractAddress1" | ||
| - "0xYourContractAddress2" | ||
| handler: ./src/EventHandlers.ts | ||
| events: | ||
| - event: Event # Specify event | ||
| - event: Event | ||
| ``` |
There was a problem hiding this comment.
🛠️ Refactor suggestion
YAML indentation is off – the sample won’t parse as-is
The list items under address: need two additional spaces to be a child of the scalar. Current indentation yields a top-level list and breaks the schema.
Proposed fix:
- address:
- - "0xYourContractAddress1"
- - "0xYourContractAddress2"
+ address:
+ - "0xYourContractAddress1"
+ - "0xYourContractAddress2"🤖 Prompt for AI Agents
In docs/HyperIndex/supported-networks/chainweb-testnet-21.md around lines 38 to
53, the YAML indentation for the list under the address key is incorrect,
causing parsing errors. Fix this by indenting the address list items two spaces
further so they are properly nested as children of the address key, ensuring
valid YAML structure.
| const HyperSyncQueryBuilderWrapper = () => { | ||
| return ( | ||
| <div | ||
| className="hypersync-query-builder-wrapper" | ||
| style={{ | ||
| border: '1px solid #e1e4e8', | ||
| borderRadius: '8px', | ||
| padding: '20px', | ||
| margin: '20px 0', | ||
| backgroundColor: '#f8f9fa' | ||
| }} | ||
| > | ||
| <HyperSyncQueryBuilder /> | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Guard against SSR by lazy-loading the heavy component
Docusaurus does server-side rendering; if HyperSyncQueryBuilder touches window, it will crash the build.
Consider lazy import with a runtime check:
-import { HyperSyncQueryBuilder } from 'hypersync-query-builder-component';
+import React, { lazy, Suspense } from 'react';
+const HyperSyncQueryBuilder = typeof window === 'undefined'
+ ? () => null // SSR-safe no-op
+ : lazy(() => import('hypersync-query-builder-component').then(m => ({ default: m.HyperSyncQueryBuilder })));and wrap the render with <Suspense fallback={<div>Loading…</div>}>…</Suspense>.
This prevents build-time crashes and avoids shipping the bundle to readers until they need it.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/components/HyperSyncQueryBuilderWrapper.jsx around lines 5 to 20, the
HyperSyncQueryBuilder component is imported and rendered directly, which can
cause server-side rendering issues if it accesses window. To fix this, replace
the direct import with a React lazy import inside a runtime check for window,
and wrap the component rendering in a Suspense component with a fallback UI to
defer loading until client-side rendering.
| "supported-networks/0g-newton-testnet","supported-networks/abstract","supported-networks/aleph-zero-evm","supported-networks/altlayer-op-demo-testnet","supported-networks/ancient8","supported-networks/arbitrum","supported-networks/arbitrum-blueberry","supported-networks/arbitrum-nova","supported-networks/arbitrum-sepolia","supported-networks/artela-testnet","supported-networks/arthera-mainnet","supported-networks/asset-chain-mainnet","supported-networks/astar-zkevm","supported-networks/astar-zkyoto","supported-networks/aurora","supported-networks/avalanche","supported-networks/b2-hub-testnet","supported-networks/b3","supported-networks/b3-sepolia-testnet","supported-networks/base","supported-networks/base-sepolia","supported-networks/beam","supported-networks/berachain","supported-networks/berachain-artio-testnet","supported-networks/berachain-bartio","supported-networks/bevm-mainnet","supported-networks/bevm-testnet","supported-networks/bitfinity-mainnet","supported-networks/bitfinity-testnet","supported-networks/bitgert-mainnet","supported-networks/bitlayer","supported-networks/blast","supported-networks/blast-sepolia","supported-networks/bob-mainnet","supported-networks/boba","supported-networks/boba-bnb-mainnet","supported-networks/botanix-testnet","supported-networks/bsc","supported-networks/bsc-testnet","supported-networks/canto","supported-networks/canto-testnet","supported-networks/celo","supported-networks/celo-alfajores-testnet","supported-networks/chainweb-testnet-20","supported-networks/chainweb-testnet-21","supported-networks/chiliz","supported-networks/chiliz-testnet-spicy","supported-networks/citrea-devnet","supported-networks/citrea-testnet","supported-networks/core","supported-networks/creator-testnet","supported-networks/cronos-zkevm","supported-networks/cronos-zkevm-testnet","supported-networks/crossfi-mainnet","supported-networks/crossfi-mainnet","supported-networks/crossfi-testnet","supported-networks/curtis","supported-networks/cyber","supported-networks/degen-chain","supported-networks/dfk-chain","supported-networks/dogechain-mainnet","supported-networks/dogechain-testnet","supported-networks/dos-chain","supported-networks/energy-web","supported-networks/eos","supported-networks/eth","supported-networks/etherlink-testnet","supported-networks/exosama","supported-networks/fantom","supported-networks/fantom-testnet","supported-networks/flare","supported-networks/flare-songbird","supported-networks/flow","supported-networks/flow-testnet","supported-networks/fraxtal","supported-networks/fuel-mainnet","supported-networks/fuel-testnet","supported-networks/fuji","supported-networks/galadriel-devnet","supported-networks/gnosis","supported-networks/gnosis-chiado","supported-networks/gravity-alpha-mainnet","supported-networks/harmony-shard-0","supported-networks/heco-chain","supported-networks/holesky","supported-networks/hyperliquid","supported-networks/immutable-zkevm","supported-networks/immutable-zkevm-testnet","supported-networks/ink","supported-networks/iotex-network","supported-networks/japan-open-chain","supported-networks/kaia","supported-networks/kakarot-starknet-sepolia","supported-networks/kroma","supported-networks/layeredge-testnet","supported-networks/lightlink-pegasus-testnet","supported-networks/lightlink-phoenix","supported-networks/linea","supported-networks/lisk","supported-networks/lukso","supported-networks/lukso-testnet","supported-networks/manta","supported-networks/manta-pacific-sepolia","supported-networks/mantle","supported-networks/megaeth-testnet","supported-networks/merlin","supported-networks/metall2","supported-networks/meter-mainnet","supported-networks/meter-testnet","supported-networks/mev-commit","supported-networks/mint-mainnet","supported-networks/mode","supported-networks/monad-testnet","supported-networks/moonbase-alpha","supported-networks/moonbeam","supported-networks/morph","supported-networks/nautilus","supported-networks/neo-x-testnet","supported-networks/nibiru-testnet","supported-networks/now-chaint","supported-networks/oasis-emerald","supported-networks/oasis-sapphire","supported-networks/onigiri-subnet","supported-networks/onigiri-test-subnet","supported-networks/ontology-mainnet","supported-networks/ontology-testnet","supported-networks/op-celestia-raspberry","supported-networks/opbnb","supported-networks/optimism","supported-networks/optimism-sepolia","supported-networks/optopia","supported-networks/peaq","supported-networks/plume","supported-networks/polygon","supported-networks/polygon-amoy","supported-networks/polygon-zkevm","supported-networks/polygon-zkevm-cardona-testnet","supported-networks/public-goods-network","supported-networks/pulsechain","supported-networks/puppynet-shibarium","supported-networks/ronin","supported-networks/rootstock","supported-networks/saakuru","supported-networks/satoshivm","supported-networks/scroll","supported-networks/scroll-sepolia","supported-networks/sepolia","supported-networks/shibarium","supported-networks/shimmer-evm","supported-networks/skale-europa","supported-networks/soneium","supported-networks/sonic","supported-networks/sophon","supported-networks/sophon-testnet","supported-networks/stratovm-testnet","supported-networks/superseed","supported-networks/superseed-sepolia-testnet","supported-networks/swell","supported-networks/taiko","supported-networks/tangle","supported-networks/tanssi-demo","supported-networks/taraxa","supported-networks/telos-evm-mainnet","supported-networks/telos-evm-testnet","supported-networks/torus-mainnet","supported-networks/torus-testnet","supported-networks/unichain","supported-networks/unichain-sepolia","supported-networks/unicorn-ultra-nebulas-testnet","supported-networks/velas-mainnet","supported-networks/viction","supported-networks/worldchain","supported-networks/x-layer-mainnet","supported-networks/x-layer-testnet","supported-networks/xdc","supported-networks/xdc-testnet","supported-networks/zeta","supported-networks/zeta-testnet","supported-networks/zircuit","supported-networks/zklink-nova-mainnet","supported-networks/zksync","supported-networks/zksync-sepolia-testnet","supported-networks/zora","supported-networks/zora-sepolia"]} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Duplicate entries & readability of the giant one-liner
"supported-networks/crossfi-mainnet" appears twice, and the list is a single minified line which makes reviews/error-diffs hard.
- …,"supported-networks/crossfi-mainnet","supported-networks/crossfi-mainnet",…
+ …,"supported-networks/crossfi-mainnet",…Please deduplicate and pretty-print the array (one element per line) to avoid accidental regressions.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In supported-networks.json at line 5, the array contains duplicate entries such
as "supported-networks/crossfi-mainnet" and is formatted as a single long line,
which reduces readability and makes reviews difficult. Remove any duplicate
entries from the array and reformat it to have one element per line with proper
indentation to improve clarity and maintainability.
|
I am keen to keep this open for reference for the next couple of weeks in case we decide to go with this approach. Otherwise we can close it after 12 August. |
Apologies for adding all the new networks here also and dirtying the diff. When I don't include that then I can't run it locally nicely.
Summary by CodeRabbit