feat(registry-subgraph): optimism (#846)

usecannon · Apr 9, 2024 · b8f745a · b8f745a
1 parent 8fbd2b0
commit b8f745a
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 26 deletions.
diff --git a/packages/registry-subgraph/networks.json b/packages/registry-subgraph/networks.json
@@ -0,0 +1,14 @@
+{
+  "mainnet": {
+    "CannonRegistry": {
+      "address": "0x8E5C7EFC9636A6A0408A46BB7F617094B81e5dba",
+      "startBlock": 16512800
+    }
+  },
+  "optimism": {
+    "CannonRegistry": {
+      "address": "0x8E5C7EFC9636A6A0408A46BB7F617094B81e5dba",
+      "startBlock": 106756348
+    }
+  }
+}
diff --git a/packages/registry-subgraph/package.json b/packages/registry-subgraph/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "codegen": "graph codegen",
     "deploy": "graph deploy --node https://api.thegraph.com/deploy/ noahlitvin/cannon-registry-mainnet",
+    "deploy-optimism": "graph deploy --node https://api.thegraph.com/deploy/ noahlitvin/cannon-registry-optimism --network optimism",
     "create-local": "graph create --node http://localhost:8020/ noahlitvin/cannon-registry-mainnet",
     "remove-local": "graph remove --node http://localhost:8020/ noahlitvin/cannon-registry-mainnet",
     "deploy-local": "graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 noahlitvin/cannon-registry-mainnet"

diff --git a/packages/website/src/app/providers.tsx b/packages/website/src/app/providers.tsx
@@ -1,10 +1,8 @@
 'use client';
 
-import apolloClient from '@/graphql/ApolloClient';
 import LogsProvider from '@/providers/logsProvider';
 import WalletProvider from '@/providers/walletProvider';
 import { theme } from '@/theme/theme';
-import { ApolloProvider } from '@apollo/client';
 import { CacheProvider } from '@chakra-ui/next-js';
 import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -28,13 +26,11 @@ export function Providers({ children }: { children: ReactNode }) {
   return (
     <CacheProvider>
       <ChakraProvider theme={theme} colorModeManager={csm as any}>
-        <ApolloProvider client={apolloClient}>
-          <QueryClientProvider client={queryClient}>
-            <LogsProvider>
-              <WalletProvider>{children}</WalletProvider>
-            </LogsProvider>
-          </QueryClientProvider>
-        </ApolloProvider>
+        <QueryClientProvider client={queryClient}>
+          <LogsProvider>
+            <WalletProvider>{children}</WalletProvider>
+          </LogsProvider>
+        </QueryClientProvider>
       </ChakraProvider>
     </CacheProvider>
   );

diff --git a/packages/website/src/features/Search/SearchPage.tsx b/packages/website/src/features/Search/SearchPage.tsx
@@ -325,7 +325,7 @@ export const SearchPage = () => {
                     fontWeight={500}
                     href="https://thegraph.com/hosted-service/subgraph/noahlitvin/cannon-registry-mainnet"
                   >
-                    the subgraph
+                    the subgraphs
                   </Link>
                 </Text>
               </Flex>

diff --git a/packages/website/src/graphql/ApolloClient.ts b/packages/website/src/graphql/ApolloClient.ts
@@ -1,7 +1,12 @@
 import { ApolloClient, InMemoryCache } from '@apollo/client';
 
 const apolloClient = new ApolloClient({
-  uri: 'https://api.thegraph.com/subgraphs/name/noahlitvin/cannon-registry-mainnet', // Replace with your GraphQL API endpoint
+  uri: 'https://api.thegraph.com/subgraphs/name/noahlitvin/cannon-registry-mainnet',
+  cache: new InMemoryCache(),
+});
+
+export const apolloClientOptimism = new ApolloClient({
+  uri: 'https://api.thegraph.com/subgraphs/name/noahlitvin/cannon-registry-optimism',
   cache: new InMemoryCache(),
 });
 

diff --git a/packages/website/src/hooks/subgraph.ts b/packages/website/src/hooks/subgraph.ts
@@ -1,26 +1,51 @@
-import { useEffect } from 'react';
-import {
-  DocumentNode,
-  NoInfer,
-  OperationVariables,
-  QueryHookOptions,
-  QueryResult,
-  TypedDocumentNode,
-  useQuery,
-} from '@apollo/client';
+import { useEffect, useState } from 'react';
+import { ApolloError, DocumentNode, NoInfer, OperationVariables, QueryHookOptions, TypedDocumentNode } from '@apollo/client';
+import apolloClient, { apolloClientOptimism } from '@/graphql/ApolloClient';
 import { useLogs } from '@/providers/logsProvider';
+import { merge } from 'lodash';
 
 export function useQueryCannonSubgraphData<TData = any, TVariables extends OperationVariables = OperationVariables>(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: QueryHookOptions<NoInfer<TData>, NoInfer<TVariables>>
-): QueryResult<TData, TVariables> {
+): any {
   const { addLog } = useLogs();
+  const [mergedData, setMergedData] = useState<TData | undefined>(undefined);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | undefined>(undefined);
 
   useEffect(() => {
-    addLog(`Querying Subgraph: ${(query.definitions[0] as any).name.value}(${JSON.stringify(options?.variables)})`);
-  }, [query, JSON.stringify(options?.variables)]);
+    const fetchSubgraphs = async () => {
+      setLoading(true);
+      try {
+        // Query mainnet
+        const { data: mainnetData } = await apolloClient.query<TData, TVariables>({
+          query,
+          variables: options?.variables,
+        });
+
+        // Query optimism
+        const { data: optimismData } = await apolloClientOptimism.query<TData, TVariables>({
+          query,
+          variables: options?.variables,
+        });
 
-  const result = useQuery<TData, TVariables>(query, options);
+        // Merge results, with optimism data taking precedence
+        const merged = merge({}, mainnetData, optimismData);
+        setMergedData(merged);
+      } catch (e) {
+        setError(e instanceof Error ? e : new Error('An error occurred'));
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    addLog('Fetching subgraphs...');
+    void fetchSubgraphs();
+  }, [query, JSON.stringify(options?.variables)]);
 
-  return result;
+  return {
+    data: mergedData,
+    loading,
+    error: error as ApolloError | undefined,
+  };
 }