move Graph sync status to asset details only

src/components/App.tsx

@@ -40,17 +40,17 @@ export default function App({
   const { warning } = useSiteMetadata()
   const { accountId } = useWeb3()
   const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
-  // const { isGraphSynced, blockHead, blockGraph } = useGraphSyncStatus()
+  const { isGraphSynced, blockHead, blockGraph } = useGraphSyncStatus()
 
   return (
     <Styles>
       <div className={styles.app}>
-        {/* {!isGraphSynced && (
+        {(props as PageProps).uri.includes('/asset') && !isGraphSynced && (
           <AnnouncementBanner
             text={`The data for this network has only synced to Ethereum block ${blockGraph} (out of ${blockHead}). Please check back soon.`}
             state="error"
           />
-        )} */}
+        )}
 
         {(props as PageProps).uri === '/' && (
           <AnnouncementBanner text={warning.main} />

src/helpers/wrapRootElement.tsx

@@ -3,7 +3,6 @@ import Web3Provider from '../providers/Web3'
 import { UserPreferencesProvider } from '../providers/UserPreferences'
 import PricesProvider from '../providers/Prices'
 import ApolloClientProvider from '../providers/ApolloClientProvider'
-import OceanProvider from '../providers/Ocean'
 
 export default function wrapRootElement({
   element
@@ -12,13 +11,11 @@ export default function wrapRootElement({
 }): ReactElement {
   return (
     <Web3Provider>
-      {/* <OceanProvider> */}
       <ApolloClientProvider>
         <UserPreferencesProvider>
           <PricesProvider>{element}</PricesProvider>
         </UserPreferencesProvider>
       </ApolloClientProvider>
-      {/* </OceanProvider> */}
     </Web3Provider>
   )
 }

src/hooks/useGraphSyncStatus.ts

@@ -64,7 +64,7 @@ export function useGraphSyncStatus(): UseGraphSyncStatus {
 
   // Get and set head block
   useEffect(() => {
-    if (!config || !config.nodeUri || web3Loading) return
+    if (!config?.nodeUri || web3Loading) return
 
     async function initBlockHead() {
       const blockHead = block || (await getBlockHead(config))
@@ -72,11 +72,11 @@ export function useGraphSyncStatus(): UseGraphSyncStatus {
       Logger.log('[GraphStatus] Head block: ', blockHead)
     }
     initBlockHead()
-  }, [web3Loading, block, config.nodeUri])
+  }, [web3Loading, block, config])
 
   // Get and set subgraph block
   useEffect(() => {
-    if (!config || !config.subgraphUri) return
+    if (!config?.subgraphUri) return
 
     async function initBlockSubgraph() {
       setSubgraphLoading(true)
@@ -86,7 +86,7 @@ export function useGraphSyncStatus(): UseGraphSyncStatus {
       Logger.log('[GraphStatus] Latest block from subgraph: ', blockGraph)
     }
     initBlockSubgraph()
-  }, [config.subgraphUri])
+  }, [config])
 
   // Set sync status
   useEffect(() => {

src/providers/Ocean.tsx

@@ -7,13 +7,7 @@ import React, {
   ReactNode,
   useEffect
 } from 'react'
-import {
-  Ocean,
-  Logger,
-  Account,
-  Config,
-  ConfigHelperConfig
-} from '@oceanprotocol/lib'
+import { Ocean, Logger, Account, ConfigHelperConfig } from '@oceanprotocol/lib'
 
 import { useWeb3 } from './Web3'
 import { getDevelopmentConfig, getOceanConfig } from '../utils/ocean'
@@ -22,8 +16,8 @@ import { useAsset } from './Asset'
 interface OceanProviderValue {
   ocean: Ocean
   account: Account
-  config: Config
-  connect: (config: Config) => Promise<void>
+  config: ConfigHelperConfig
+  connect: (config: ConfigHelperConfig) => Promise<void>
 }
 
 const OceanContext = createContext({} as OceanProviderValue)
@@ -34,16 +28,16 @@ function OceanProvider({ children }: { children: ReactNode }): ReactElement {
 
   const [ocean, setOcean] = useState<Ocean>()
   const [account, setAccount] = useState<Account>()
-  const [config, setConfig] = useState<Config>()
+  const [config, setConfig] = useState<ConfigHelperConfig>()
 
   // -----------------------------------
   // Helper: Create Ocean instance
   // -----------------------------------
   const connect = useCallback(
-    async (config: ConfigHelperConfig | Config) => {
+    async (config: ConfigHelperConfig) => {
       if (!web3 || !ddo) return
 
-      const newConfig: Config = {
+      const newConfig: ConfigHelperConfig = {
         ...config,
         web3Provider: web3
       }
@@ -65,13 +59,13 @@ function OceanProvider({ children }: { children: ReactNode }): ReactElement {
   // Initial connection
   // -----------------------------------
   useEffect(() => {
-    if (!ddo?.chainId) return
+    // if (!ddo?.chainId) return
 
     const config = {
-      ...getOceanConfig(ddo.chainId),
+      ...getOceanConfig(ddo?.chainId || 1),
 
       // add local dev values
-      ...(ddo.chainId === 8996 && {
+      ...(ddo?.chainId === 8996 && {
         ...getDevelopmentConfig()
       })
     }