@1hive/connect-gardens 中文文档教程

Question

Garden Connector

使用 Aragon Connect 实现的 Garden 前端连接器。 它连接到使用 Graph 索引协议。

花园子图从区块链收集、存储和索引花园相关数据，并通过 GraphQL 端点提供服务。 连接器是对该子图的抽象，它提供了一个 API，任何客户端都可以使用它来获取数据。

Documentation

查看文档以深入了解 API。

Usage of Garden Connector

Set up

1. 将以下依赖项添加到您的项目中：

   yarn add @1hive/connect
   yarn add @1hive/connect-gardens
   

2. 导入它们：

   import connect from '@1hive/connect'
   import { connectGarden } from '@1hive/connect-gardens'
   

3. 设置连接器：

   const org = await connect(DAO_ADDRESS_OR_ENS, 'thegraph', { network: CHAIN_ID })
   
   const gardenConnector = await connectGarden(org)
   

Set up in a React App

1. 将以下依赖项添加到您的项目中：

   yarn add @1hive/connect-react
   yarn add @1hive/connect-gardens
   

2. 将您的主要 组件包装在 组件由 @1hive/connect-react 库提供。

   import { Connect } from '@1hive/connect-react'
   
   <Connect
       location={DAO_ADDRESS_OR_ENS}
       connector="thegraph"
       options={{
       network: CHAIN_ID,
       }}
   >
       <App />
   </Connect>
   

3. 设置连接器：

   import {
       useOrganization,
   } from '@1hive/connect-react'
   
   function App() {
       const [gardenConnector, setGardenConnector] = useState(null)
       const [organization] = useOrganization()
   useEffect(() => {
       if (!organization) {
           return
       }
   
       let cancelled = false
   
       const fetchGardenConnector = async () => {
           try {
               const gardenConnector = await connectGarden(organization)
   
               if (!cancelled) {
                   setGardenConnector(gardenConnector)
               }
           } catch (err) {
               console.error(`Error fetching hatch connector: ${err}`)
           }
       }
   
       fetchGardenConnector()
   
       return () => {
           cancelled = true
       }
   }, [organization])
   }
   

Data fetch example

下面是一个示例，说明如何获取 100 个提案，按创建时间升序排序并跳过前 50 个。使用空元数据（提案名称）过滤器按所有提案类型和所有提案状态进行过滤。

const ALL_PROPOSAL_TYPES = [0, 1, 2] // [Suggestion, Proposal, Decision]
const ALL_PROPOSAL_STATUSES = [0, 1, 2] // [Active, Cancelled, Executed]

const proposals = await gardenConnector.proposals({
    first: 100,
    skip: 50,
    orderBy: 'createdAt',
    orderDirection: 'asc',
    types: ALL_PROPOSAL_TYPES,
    statuses: ALL_PROPOSAL_STATUSES,
    metadata: ''
})

Data updates subscription example

这是一个示例，说明如何设置前 20 个提案的提案数据订阅，按其创建时间降序排序并跳过前 5 个。按具有 Active 状态且具有元数据“funding”的 Suggestion 和 Proposal 类型的提案过滤在他们的名字里。

const handler = gardenConnector.onProposals(
    {
        first: 20,
        skip: 5,
        orderBy: 'totalAmount',
        orderDirection: 'desc',
        types: [0, 1],
        statuses: [0],
        metadata: 'funding'
    },
    proposals => {
        console.log('Updated proposals: ', proposals)
    }
)

// ...

handler.unsubscribe()

Usage of useGardens and useUser

Data fetch example of useGardens

这是一个示例，说明如何创建 React 挂钩以通过 HNY 流动性获取花园订单列表。

import { getGardens } from '@1hive/connect-gardens'

function useGardensList() {
  const [gardens, setGardens] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setLoading(true)
    const fetchGardens = async () => {
      try {
        setLoading(true)

        const result = await getGardens(
          { network: CHAIN_ID },
          { orderBy: 'honeyLiquidity' }
        )

        setGardens(result)
      } catch (err) {
        setGardens([])
        console.error(`Error fetching gardens ${err}`)
      }
      setLoading(false)
    }

    fetchGardens()
  }, [sorting.queryArgs])

  return [gardens, loading]
}

Data fetch example of useUser

这是一个示例，说明如何创建一个 React 挂钩以在给定地址的情况下获取用户数据。

import { getUser } from '@1hive/connect-gardens'

function useUser(address) {
  const [user, setUser] = useState(null)
  const mounted = useMounted()

  useEffect(() => {
    if (!address) {
      return
    }

    const fetchUser = async () => {
      try {
        const user = await getUser(
          { network: CHAIN_ID },
          { id: address.toLowerCase() }
        )
        if (mounted()) {
          setUser(transformUserData(user))
        }
      } catch (err) {
        console.error(`Failed to fetch user: ${err}`)
      }
    }

    fetchUser()
  }, [address, mounted])

  return user
}

如需更多信息，请查看 Aragon Connect 文档。

Contributing

我们欢迎社区贡献！

请查看我们开放的问题开始。