Have ideas to improve npm?Join in the discussion! »

    TypeScript icon, indicating that this package has built-in type declarations

    2.1.5 • Public • Published

    Hatch Connector

    Connector for the Hatch frontend implemented using Aragon Connect. It connects to a hatch subgraph created using The Graph indexing protocol.

    The hatch subgraph collects, stores and indexes hatch-related data from the blockchain and serves it through a GraphQL endpoint. The connector is an abstraction over this subgraph which offers an API that can be use by any client to fetch data.

    API Reference

    See API.md


    Set up

    1. Add the following dependencies to your project:

      yarn add @1hive/connect
      yarn add @tecommons/connect-hatch
    2. Import them:

      import connect from '@1hive/connect'
      import connectHatch from '@tecommons/connect-hatch'
    3. Set up the connector:

      const org = await connect(DAO_ADDRESS_OR_ENS, 'thegraph', { network: CHAIN_ID })
      const hatchApp = await org.app('marketplace-hatch')
      const hatchConnector = await connectHatch(hatchApp)

    Set up in a React App

    1. Add the following dependencies to your project:

      yarn add @1hive/connect-react
      yarn add @tecommons/connect-hatch
    2. Wrap your main <App/> component in the <Connect/> component provided by the @1hive/connect-react library.

      import { Connect } from '@1hive/connect-react'
          network: CHAIN_ID,
          <App />
    3. Set up the connector:

      import {
      } from '@1hive/connect-react'
      function App() {
          const [hatchConnector, setHatchConnector] = useState(null)
          const [hatchApp] = useApp('marketplace-hatch')
          useEffect(() => {
              if (!hatchApp) {
              let cancelled = false
              const fetchHatchConnector = async () => {
                  try {
                      const hatchConnector = await connectHatch(hatchApp)
                      if (!cancelled) {
                  } catch (err) {
                      console.error(`Error fetching hatch connector: ${err}`)
              return () => {
                  cancelled = true
          }, [hatchApp])

    Data fetch example

    Below there is an example of how to fetch 100 contributors, sorted in ascending order by their total contribution amount and skipping the first 50.

    const contributors = await hatchConnector.contributors({
        first: 100,
        skip: 50,
        orderBy: 'totalValue',
        orderDirection: 'asc',

    Data updates subscription example

    This is an example of how to set a contributors data subscription of the first 20 contributors, sorted in descending order by their total hatch token amount and skipping the first 5.

    const handler = hatchConnector.onContributors(
            first: 20,
            skip: 5,
            orderBy: 'totalAmount',
            orderDirection: 'desc',
        contributors => {
            console.log('Updated contributors: ', contirbutors)
    // ...

    Contract call example

    Below there is an example of how to call the contract using the connector to open the hatch.

    const signer = ethers.getSigner()
    const intent = await hatchConnector.open()
    const openTxs = intent.transactions
    for(let i = 0; i < openTxs.length; i++) {
        const txResponse = await signer.sendTransaction(openTxs[i])
        const txReceipt = await txResponse.wait()

    For more information check out the Aragon Connect docs.


    We welcome community contributions!

    Please check out our open Issues to get started.


    npm i @tecommons/connect-hatch

    DownloadsWeekly Downloads






    Unpacked Size

    851 kB

    Total Files


    Last publish


    • avatar
    • avatar