Eng 61 update subgraph endpoints

.env

@@ -33,6 +33,8 @@ VITE_APP_INFURA_IPFS_API_KEY=""
 VITE_APP_INFURA_IPFS_API_SECRET=""
 # index.html and WalletConnect metadata
 VITE_APP_SITE_URL="http://localhost:3000"
+# TheGraph API key
+VITE_APP_THEGRAPH_API_KEY=""
 # WalletConnect Cloud Project ID
 VITE_APP_WALLET_CONNECT_PROJECT_ID=""
 

.gitignore

@@ -33,9 +33,6 @@ yarn-error.log*
 # translation script outputs
 *.csv
 
-# GraphQL generated files
-/.graphclient
-
 # Wrangler
 /.wrangler
 .dev.vars

package.json

@@ -4,13 +4,11 @@
   "private": true,
   "dependencies": {
     "@amplitude/analytics-browser": "^2.11.1",
-    "@apollo/client": "^3.7.10",
     "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/react": "^2.8.2",
     "@cloudflare/workers-types": "^4.20241230.0",
     "@fontsource/space-mono": "^5.0.19",
     "@fractal-framework/fractal-contracts": "^1.4.2",
-    "@graphprotocol/client-apollo": "^1.0.16",
     "@hatsprotocol/modules-sdk": "^1.4.0",
     "@hatsprotocol/sdk-v1-core": "^0.9.0",
     "@hatsprotocol/sdk-v1-subgraph": "^1.0.0",
@@ -32,6 +30,7 @@
     "evm-proxy-detection": "^1.1.0",
     "formik": "^2.2.9",
     "framer-motion": "^6.5.1",
+    "graphql": "^16.10.0",
     "hono": "^4.6.16",
     "i18next": "^23.10.1",
     "i18next-browser-languagedetector": "^6.1.5",
@@ -50,6 +49,7 @@
     "react-router-dom": "^6.22.0",
     "remark-gfm": "^4.0.0",
     "sonner": "^1.5.0",
+    "urql": "^4.2.1",
     "use-between": "^1.3.5",
     "viem": "^2.13.1",
     "vite": "^5.3.4",
@@ -66,11 +66,7 @@
     "dev": "vite --force",
     "preview": "vite preview",
     "build": "vite build && vite build --mode page-function",
-    "build:cf": "vite build && vite build --mode page-function",
-    "graphql:build": "graphclient build",
-    "graphql:dev-server": "graphclient serve-dev",
-    "test": "vitest --dir=test",
-    "postinstall": "npm run graphql:build"
+    "test": "vitest --dir=test"
   },
   "engines": {
     "node": "23.6.0",
@@ -89,7 +85,6 @@
     ]
   },
   "devDependencies": {
-    "@graphprotocol/client-cli": "^2.2.20",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.2.1",
     "@types/lodash.camelcase": "^4.3.9",

src/components/DaoHierarchy/DaoHierarchyNode.tsx

@@ -1,18 +1,18 @@
-import { useLazyQuery } from '@apollo/client';
 import { Center, Flex, Icon, Link, Text } from '@chakra-ui/react';
 import { abis } from '@fractal-framework/fractal-contracts';
 import { ArrowElbowDownRight } from '@phosphor-icons/react';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link as RouterLink } from 'react-router-dom';
 import { Address, getContract, zeroAddress } from 'viem';
-import { DAOQueryDocument } from '../../../.graphclient';
 import { SENTINEL_ADDRESS } from '../../constants/common';
 import { DAO_ROUTES } from '../../constants/routes';
+import { createDecentSubgraphClient } from '../../graphql';
+import { DAOQuery, DAOQueryResponse } from '../../graphql/DAOQueries';
 import { useDecentModules } from '../../hooks/DAO/loaders/useDecentModules';
 import useNetworkPublicClient from '../../hooks/useNetworkPublicClient';
 import { CacheKeys } from '../../hooks/utils/cache/cacheDefaults';
-import { setValue, getValue } from '../../hooks/utils/cache/useLocalStorage';
+import { getValue, setValue } from '../../hooks/utils/cache/useLocalStorage';
 import { useAddressContractType } from '../../hooks/utils/useAddressContractType';
 import { useSafeAPI } from '../../providers/App/hooks/useSafeAPI';
 import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
@@ -31,6 +31,7 @@ import { BarLoader } from '../ui/loaders/BarLoader';
  * From this initial DAO info, the component will get the DAO's children
  * and display another DaoNode for each child, and so on for their children.
  */
+
 export function DaoHierarchyNode({
   safeAddress,
   depth,
@@ -43,20 +44,12 @@ export function DaoHierarchyNode({
   const safeApi = useSafeAPI();
   const [hierarchyNode, setHierarchyNode] = useState<DaoHierarchyInfo>();
   const [hasErrorLoading, setErrorLoading] = useState<boolean>(false);
-  const { addressPrefix, subgraph, chain } = useNetworkConfigStore();
+  const { addressPrefix, getConfigByChainId, chain } = useNetworkConfigStore();
   const publicClient = useNetworkPublicClient();
 
   const { getAddressContractType } = useAddressContractType();
   const lookupModules = useDecentModules();
 
-  const [getDAOInfo] = useLazyQuery(DAOQueryDocument, {
-    context: {
-      subgraphSpace: subgraph.space,
-      subgraphSlug: subgraph.slug,
-      subgraphVersion: subgraph.version,
-    },
-  });
-
   const getVotingStrategies = useCallback(
     async (azoriusModule: DecentModule) => {
       const azoriusContract = getContract({
@@ -127,21 +120,38 @@ export function DaoHierarchyNode({
       }
       try {
         const safe = await safeApi.getSafeInfo(_safeAddress);
-        const graphRawNodeData = await getDAOInfo({ variables: { safeAddress: _safeAddress } });
+
+        const client = createDecentSubgraphClient(getConfigByChainId(chain.id));
+        const queryResult = await client.query<DAOQueryResponse>(DAOQuery, {
+          safeAddress: _safeAddress,
+        });
+
+        if (queryResult.error) {
+          throw new Error('Query failed');
+        }
+
+        if (!queryResult.data) {
+          throw new Error('No data found');
+        }
+
         const modules = await lookupModules(safe.modules);
-        const graphDAOData = graphRawNodeData.data?.daos[0];
+        const graphDAOData = queryResult.data.daos[0];
         const azoriusModule = getAzoriusModuleFromModules(modules ?? []);
         const votingStrategies: DaoHierarchyStrategyType[] = azoriusModule
           ? await getGovernanceTypes(azoriusModule)
           : ['MULTISIG'];
-        if (!graphRawNodeData || !graphDAOData) {
+
+        if (!graphDAOData) {
           throw new Error('No data found');
         }
+
         return {
           daoName: graphDAOData.name ?? null,
           safeAddress: _safeAddress,
-          parentAddress: graphDAOData.parentAddress ?? null,
-          childAddresses: graphDAOData.hierarchy.map(child => child.address),
+          parentAddress: graphDAOData.parentAddress as Address | null,
+          childAddresses: graphDAOData.hierarchy.map(
+            (child: { address: string }) => child.address as Address,
+          ),
           daoSnapshotENS: graphDAOData.snapshotENS ?? null,
           proposalTemplatesHash: graphDAOData.proposalTemplatesHash ?? null,
           modules,
@@ -152,9 +162,10 @@ export function DaoHierarchyNode({
         return;
       }
     },
-    [getDAOInfo, getGovernanceTypes, lookupModules, safeApi],
+    [getConfigByChainId, chain.id, getGovernanceTypes, lookupModules, safeApi],
   );
 
+  // Effect to handle query result changes
   useEffect(() => {
     if (safeAddress) {
       const cachedNode = getValue({
@@ -166,9 +177,11 @@ export function DaoHierarchyNode({
         setHierarchyNode(cachedNode);
         return;
       }
+
       loadDao(safeAddress).then(_node => {
         if (!_node) {
           setErrorLoading(true);
+          return;
         }
         setValue(
           {
@@ -181,8 +194,8 @@ export function DaoHierarchyNode({
         setHierarchyNode(_node);
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [chain.id, loadDao, safeAddress]);
+
   if (!hierarchyNode) {
     // node hasn't loaded yet
     return (

src/components/ui/page/Global/index.tsx

@@ -35,6 +35,7 @@ const useUserTracking = () => {
 const useUpdateFavoritesCache = (onFavoritesUpdated: () => void) => {
   const { favoritesList } = useAccountFavorites();
   const { getEnsName } = useNetworkEnsNameAsync();
+
   useEffect(() => {
     (async () => {
       const favoriteNames = await Promise.all(
@@ -55,10 +56,7 @@ const useUpdateFavoritesCache = (onFavoritesUpdated: () => void) => {
 
           const networkConfig = getNetworkConfig(favoriteChain.id);
 
-          return Promise.all([
-            favorite,
-            getSafeName(networkConfig.subgraph, favorite.address, getEnsName),
-          ]);
+          return Promise.all([favorite, getSafeName(networkConfig, favorite.address, getEnsName)]);
         }),
       );
 
@@ -91,6 +89,8 @@ const useUpdateFavoritesCache = (onFavoritesUpdated: () => void) => {
       }
     })();
   }, [favoritesList, getEnsName, onFavoritesUpdated]);
+
+  return null;
 };
 
 export function Global() {

src/graphql/DAO.graphql → src/graphql/DAOQueries.ts

@@ -1,4 +1,26 @@
-query DAOQuery($safeAddress: Bytes) {
+// Define the base DAO structure that can be nested
+interface DAONode {
+  id: string;
+  address: string;
+  parentAddress: string | null;
+  name: string | null;
+  snapshotENS: string | null;
+}
+
+// Define the recursive hierarchy structure
+interface DAOHierarchyNode extends DAONode {
+  hierarchy: DAOHierarchyNode[];
+}
+
+// Define the top-level DAO response structure
+export interface DAOQueryResponse {
+  daos: (DAONode & {
+    hierarchy: DAOHierarchyNode[];
+    proposalTemplatesHash: string | null;
+  })[];
+}
+
+export const DAOQuery = `query DAOQuery($safeAddress: Bytes) {
   daos(where: { id: $safeAddress }) {
     id
     address
@@ -39,4 +61,4 @@ query DAOQuery($safeAddress: Bytes) {
     }
     proposalTemplatesHash
   }
-}
+}`;

src/graphql/SnapshotQueries.ts

@@ -0,0 +1,118 @@
+import { Address } from 'viem';
+import { SnapshotPlugin, SnapshotProposalType } from '../types';
+
+// Types for Extended Snapshot Proposal
+interface Strategy {
+  name: string;
+  network: string;
+  params: Record<string, unknown>;
+}
+
+export interface ExtendedSnapshotProposalResponse {
+  proposal: {
+    snapshot: number;
+    type: SnapshotProposalType;
+    quorum: number;
+    privacy: string;
+    strategies: Strategy[];
+    plugins: SnapshotPlugin[];
+    choices: string[];
+    ipfs: string;
+  };
+}
+
+export interface SnapshotVote {
+  id: string;
+  voter: Address;
+  vp: number;
+  vp_by_strategy: number[];
+  vp_state: string;
+  created: number;
+  choice: number | Record<string, number>;
+}
+
+export interface SnapshotProposalVotesResponse {
+  votes: SnapshotVote[];
+}
+
+// Types for User Voting Weight
+interface VotingPower {
+  vp: number;
+  vp_by_strategy: number[];
+  vp_state: string;
+}
+
+export interface UserVotingWeightResponse {
+  vp: VotingPower;
+}
+
+// Types for Proposals Query
+interface SnapshotProposal {
+  id: string;
+  title: string;
+  body: string;
+  start: number;
+  end: number;
+  state: string;
+  author: Address;
+}
+
+export interface ProposalsResponse {
+  proposals: SnapshotProposal[];
+}
+
+export const ExtendedSnapshotProposalQuery = `query ExtendedSnapshotProposal($snapshotProposalId: String!) {
+  proposal(id: $snapshotProposalId) {
+    snapshot
+    type
+    quorum
+    privacy
+    strategies {
+      name
+      network
+      params
+    }
+    plugins
+    choices
+    ipfs
+  }
+}`;
+
+export const SnapshotProposalVotesQuery = `query SnapshotProposalVotes($snapshotProposalId: String!) {
+  votes(where: { proposal: $snapshotProposalId }, first: 500) {
+    id
+    voter
+    vp
+    vp_by_strategy
+    vp_state
+    created
+    choice
+  }
+}`;
+
+export const UserVotingWeightQuery = `query UserVotingWeight($voter: String!, $space: String!, $proposal: String!) {
+  vp(voter: $voter, space: $space, proposal: $proposal) {
+    vp
+    vp_by_strategy
+    vp_state
+  }
+}`;
+
+export const ProposalsQuery = `query Proposals($spaceIn: [String!]) {
+  proposals(
+    first: 50,
+    where: {
+      space_in: $spaceIn
+    },
+    orderBy: "created",
+    orderDirection: desc
+  ) {
+    id
+    title
+    body
+    start
+    end
+    state
+    author
+  }
+}`;