Add subgraph (#77)

* successful integration

* rm unused options

* integration done

* fix order

README.md

@@ -42,21 +42,15 @@ pnpm build
 
 You can use this repo as a template for your own DAO.
 
-You can replace the `GOV_CONTRACT_ADDRESS` and `startBlock` in the [`config.ts`](https://github.com/w3hc/gov-ui/blob/main/src/utils/config.ts) file. Also, make sure the network id is correct everywhere in the app (in [`index.ts`](https://github.com/w3hc/gov-ui/blob/main/src/pages/index.tsx#L51), but also in [`proposal/\[proposalId\].tsx`](https://github.com/w3hc/gov-ui/blob/main/src/pages/proposal/%5BproposalId%5D.tsx#L109)).
-
-Feel free to [contact me](https://github.com/w3hc/gov-ui/tree/main?tab=readme-ov-file#support) if you need anything.
+You can replace the `GOV_CONTRACT_ADDRESS` in the [`config.ts`](https://github.com/w3hc/gov-ui/blob/main/src/utils/config.ts) file. Also, make sure the network id is correct everywhere in the app (in [`index.ts`](https://github.com/w3hc/gov-ui/blob/main/src/pages/index.tsx#L51), but also in [`proposal/\[proposalId\].tsx`](https://github.com/w3hc/gov-ui/blob/main/src/pages/proposal/%5BproposalId%5D.tsx#L109)).
 
 ## Includes
 
 - [Next.js](https://nextjs.org/docs)
 - [Chakra UI](https://chakra-ui.com/)
 - [Ethers v6](https://docs.ethers.org/v6/)
-- [viem](https://viem.sh/)
-- [wagmi](https://wagmi.sh/)
 - [Web3Modal SDK from WalletConnect](https://docs.walletconnect.com/)
-- [Sign-In with Ethereum](https://www.login.xyz/)
-- [Gitcoin Passport](https://docs.passport.gitcoin.co/)
-- [usehooks-ts](https://usehooks-ts.com/)
+- [Subgraph](https://thegraph.com/docs/en/)
 - [next-SEO](https://github.com/garmeeh/next-seo)
 - [TypeScript](https://www.typescriptlang.org/)
 - [eslint](https://eslint.org/)
@@ -66,7 +60,3 @@ Feel free to [contact me](https://github.com/w3hc/gov-ui/tree/main?tab=readme-ov
 ## Support
 
 You can contact me via [Element](https://matrix.to/#/@julienbrg:matrix.org), [Farcaster](https://warpcast.com/julien-), [Telegram](https://t.me/julienbrg), [Twitter](https://twitter.com/julienbrg), [Discord](https://discordapp.com/users/julienbrg), or [LinkedIn](https://www.linkedin.com/in/julienberanger/).
-
-## Credits
-
-[Nexth](https://github.com/wslyvh/nexth/) boilerplate was built by [wslyvh](https://github.com/wslyvh) and [others](https://github.com/wslyvh/nexth/graphs/contributors).

package.json

@@ -19,6 +19,7 @@
     "@types/react-dom": "18.2.1",
     "@web3modal/ethers": "^4.1.6",
     "autoprefixer": "10.4.14",
+    "axios": "^1.7.2",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",
     "ethers": "^6.11.1",

src/pages/index.tsx

@@ -9,12 +9,14 @@ import { HeadingComponent } from '../components/layout/HeadingComponent'
 import { ArrowForwardIcon, WarningIcon } from '@chakra-ui/icons'
 import Image from 'next/image'
 import { firstIteration } from '../utils/config'
+import axios from 'axios'
 
 export default function Home() {
   const { address, chainId, isConnected } = useWeb3ModalAccount()
   const { walletProvider } = useWeb3ModalProvider()
   const customProvider = new ethers.JsonRpcProvider(process.env.NEXT_PUBLIC_RPC_ENDPOINT_URL)
   const toast = useToast()
+  const queryURL: string = 'https://api.studio.thegraph.com/query/52496/gov-subgraph/version/latest'
 
   const [initialized, setInitialized] = useState<boolean>(false)
   const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -41,6 +43,18 @@ export default function Home() {
   }
 
   const makeProposalObject = async () => {
+    const uniswapGraphQuery: string = `query proposalsCreated {
+        proposalCreateds(orderDirection: desc, orderBy: voteEnd) {
+        proposalId
+        blockNumber
+        calldatas
+        description
+        voteEnd
+        voteStart
+        transactionHash
+      }
+    }`
+
     try {
       console.log('fetching proposals...')
       if (initialized) {
@@ -49,56 +63,45 @@ export default function Home() {
         return
       }
       setIsLoading(true)
-      const gov = new ethers.Contract(govContract.address, govContract.abi, customProvider)
       setProposal([])
-
-      if (typeof gov.getProposalCreatedBlocks === 'function') {
-        const proposalCreatedBlocks = await gov.getProposalCreatedBlocks()
-        let proposalRaw = proposal
-        for (let i = firstIteration; i < proposalCreatedBlocks.length; i++) {
-          console.log('iteration:', i)
-          /////////////////*******//////////////
-
-          const proposals = (await gov.queryFilter('ProposalCreated', proposalCreatedBlocks[i])) as any
-
-          if (proposals.length > 0) {
-            proposalRaw.push(
-              ...[
-                {
-                  id: String(proposals[0].args[0]),
-                  link: baseUrl + String(proposals[0].args[0]),
-                  title: proposals[0].args[8].substring(proposals[0].args[8] == '#' ? 2 : 2, proposals[0].args[8].indexOf('\n')),
-                  state: Number(await getState(proposals[0].args[0])),
-                },
-              ]
-            )
-          } else {
-            console.log('\nNo proposals found at block #' + Number(proposalCreatedBlocks[i]))
-          }
+      const response = await axios.post(
+        queryURL,
+        {
+          query: uniswapGraphQuery,
+        },
+        {
+          headers: { 'Content-Type': 'application/json' },
         }
+      )
 
-        // TODO: fix executed twice...
-        // Remove duplicates based on the `id` property
-        const uniqueProposals = proposal.filter((item, index, self) => index === self.findIndex((t) => t.id === item.id))
-        setProposal(uniqueProposals)
+      const proposals = response.data.data.proposalCreateds
+      console.log('proposals', proposals)
+      let proposalRaw = proposal
 
-        console.log('all proposals fetched ✅')
-        setInitialized(true)
-        setIsLoading(false)
+      console.log('proposals[0].proposalId', proposals[0].proposalId)
+      console.log('proposals.length', proposals.length)
+      if (proposals.length > 0) {
+        for (let i = 0; i < proposals.length; i++) {
+          proposalRaw.push(
+            ...[
+              {
+                id: String(proposals[i].proposalId),
+                link: baseUrl + String(proposals[i].proposalId),
+                title: proposals[i].description.substring(proposals[i].description == '#' ? 2 : 2, proposals[i].description.indexOf('\n')),
+                state: Number(await getState(proposals[i].proposalId)),
+              },
+            ]
+          )
+        }
       } else {
-        console.error('getProposalCreatedBlocks method not available on this DAO contract')
-        setInitialized(true)
-        setIsLoading(false)
-        toast({
-          title: 'Oh no!',
-          description: 'The getProposalCreatedBlocks method is NOT available on this contract',
-          status: 'error',
-          position: 'bottom',
-          variant: 'subtle',
-          duration: 9000,
-          isClosable: true,
-        })
+        console.log('\nNo proposals found')
       }
+
+      const uniqueProposals = proposal.filter((item, index, self) => index === self.findIndex((t) => t.id === item.id))
+      setProposal(uniqueProposals)
+      console.log('all proposals fetched ✅')
+      setInitialized(true)
+      setIsLoading(false)
     } catch (error: any) {
       setIsLoading(false)
       setInitialized(true)
@@ -115,6 +118,81 @@ export default function Home() {
         })
       }
     }
+
+    // try {
+    //   console.log('fetching proposals...')
+    //   if (initialized) {
+    //     console.log('already initialized')
+    //     setIsLoading(false)
+    //     return
+    //   }
+    //   setIsLoading(true)
+    //   const gov = new ethers.Contract(govContract.address, govContract.abi, customProvider)
+    //   setProposal([])
+
+    //   if (typeof gov.getProposalCreatedBlocks === 'function') {
+    //     const proposalCreatedBlocks = await gov.getProposalCreatedBlocks()
+    //     let proposalRaw = proposal
+    //     for (let i = firstIteration; i < proposalCreatedBlocks.length; i++) {
+    //       console.log('iteration:', i)
+    //       /////////////////*******//////////////
+
+    //       const proposals = (await gov.queryFilter('ProposalCreated', proposalCreatedBlocks[i])) as any
+
+    //       if (proposals.length > 0) {
+    //         proposalRaw.push(
+    //           ...[
+    //             {
+    //               id: String(proposals[0].args[0]),
+    //               link: baseUrl + String(proposals[0].args[0]),
+    //               title: proposals[0].args[8].substring(proposals[0].args[8] == '#' ? 2 : 2, proposals[0].args[8].indexOf('\n')),
+    //               state: Number(await getState(proposals[0].args[0])),
+    //             },
+    //           ]
+    //         )
+    //       } else {
+    //         console.log('\nNo proposals found at block #' + Number(proposalCreatedBlocks[i]))
+    //       }
+    //     }
+
+    //     // TODO: fix executed twice...
+    //     // Remove duplicates based on the `id` property
+    //     const uniqueProposals = proposal.filter((item, index, self) => index === self.findIndex((t) => t.id === item.id))
+    //     setProposal(uniqueProposals)
+
+    //     console.log('all proposals fetched ✅')
+    //     setInitialized(true)
+    //     setIsLoading(false)
+    //   } else {
+    //     console.error('getProposalCreatedBlocks method not available on this DAO contract')
+    //     setInitialized(true)
+    //     setIsLoading(false)
+    //     toast({
+    //       title: 'Oh no!',
+    //       description: 'The getProposalCreatedBlocks method is NOT available on this contract',
+    //       status: 'error',
+    //       position: 'bottom',
+    //       variant: 'subtle',
+    //       duration: 9000,
+    //       isClosable: true,
+    //     })
+    //   }
+    // } catch (error: any) {
+    //   setIsLoading(false)
+    //   setInitialized(true)
+    //   console.error('error:', error)
+    //   if (!error.message.includes('could not decode result data')) {
+    //     toast({
+    //       title: 'Woops',
+    //       description: 'Something went wrong...',
+    //       status: 'error',
+    //       position: 'bottom',
+    //       variant: 'subtle',
+    //       duration: 9000,
+    //       isClosable: true,
+    //     })
+    //   }
+    // }
   }
 
   useEffect(() => {