Fixing metadata history (#794)

* Moving UqlProvider to Asset

* Using chainId from DDO

* typos

* new strategy for subgraph query

* code comments

* unused imports cleanup

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

src/components/App.tsx

@@ -8,7 +8,6 @@ import { useWeb3 } from '../providers/Web3'
 import { useSiteMetadata } from '../hooks/useSiteMetadata'
 import { useAccountPurgatory } from '../hooks/useAccountPurgatory'
 import AnnouncementBanner from './atoms/AnnouncementBanner'
-import { useGraphSyncStatus } from '../hooks/useGraphSyncStatus'
 import styles from './App.module.css'
 
 const contentQuery = graphql`
@@ -40,7 +39,6 @@ export default function App({
   const { warning } = useSiteMetadata()
   const { accountId } = useWeb3()
   const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
-  // const { isGraphSynced, blockHead, blockGraph } = useGraphSyncStatus()
 
   return (
     <Styles>

src/components/molecules/MarketStats.tsx

@@ -4,7 +4,7 @@ import Conversion from '../atoms/Price/Conversion'
 import PriceUnit from '../atoms/Price/PriceUnit'
 import Tooltip from '../atoms/Tooltip'
 import NetworkName from '../atoms/NetworkName'
-import { fetchData, getSubgrahUri } from '../../utils/subgraph'
+import { fetchData, getSubgraphUri } from '../../utils/subgraph'
 import { filterNetworksByType } from './UserPreferences/Networks/index'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 import useNetworkMetadata from '../../hooks/useNetworkMetadata'
@@ -113,7 +113,7 @@ export default function MarketStats(): ReactElement {
 
     for (const chainId of mainChainIdsList) {
       const context: OperationContext = {
-        url: `${getSubgrahUri(
+        url: `${getSubgraphUri(
           chainId
         )}/subgraphs/name/oceanprotocol/ocean-subgraph`,
         requestPolicy: 'network-only'

src/components/organisms/AssetContent/EditHistory.tsx

@@ -2,10 +2,10 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import { useAsset } from '../../../providers/Asset'
 import ExplorerLink from '../../atoms/ExplorerLink'
 import Time from '../../atoms/Time'
-import styles from './EditHistory.module.css'
-import { gql, useQuery } from 'urql'
+import { gql, OperationContext, useQuery } from 'urql'
 import { ReceiptData_datatokens_updates as ReceiptData } from '../../../@types/apollo/ReceiptData'
-import { useWeb3 } from '../../../providers/Web3'
+import { getQueryContext } from '../../../utils/subgraph'
+import styles from './EditHistory.module.css'
 
 const getReceipts = gql`
   query ReceiptData($address: ID!) {
@@ -20,14 +20,32 @@ const getReceipts = gql`
 `
 
 export default function EditHistory(): ReactElement {
-  const { networkId } = useWeb3()
   const { ddo } = useAsset()
+
+  //
+  // 1. Construct subgraph query based on DDO.
+  // Need to wait for it to avoid infinite rerender loop with useQuery.
+  //
+  const [queryContext, setQueryContext] = useState<OperationContext>()
+
+  useEffect(() => {
+    if (!ddo) return
+
+    const queryContext = getQueryContext(ddo.chainId)
+    setQueryContext(queryContext)
+  }, [ddo])
+
   const [result] = useQuery({
     query: getReceipts,
-    variables: { address: ddo?.dataToken.toLowerCase() }
+    variables: { address: ddo?.dataToken.toLowerCase() },
+    context: queryContext,
+    pause: !ddo || !queryContext
   })
   const { data } = result
 
+  //
+  // 2. Construct display data based on fetched data.
+  //
   const [receipts, setReceipts] = useState<ReceiptData[]>()
   const [creationTx, setCreationTx] = useState<string>()
 
@@ -51,8 +69,7 @@ export default function EditHistory(): ReactElement {
         {receipts?.map((receipt) => (
           <li key={receipt.id} className={styles.item}>
             <ExplorerLink networkId={ddo.chainId} path={`/tx/${receipt.tx}`}>
-              edited{' '}
-              <Time date={receipt.timestamp.toString()} relative isUnix />
+              edited <Time date={`${receipt.timestamp}`} relative isUnix />
             </ExplorerLink>
           </li>
         ))}

src/components/pages/Home.tsx

@@ -1,12 +1,9 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import SearchBar from '../molecules/SearchBar'
-import styles from './Home.module.css'
 import AssetList from '../organisms/AssetList'
 import {
   QueryResult,
   SearchQuery
 } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
-import Container from '../atoms/Container'
 import Button from '../atoms/Button'
 import Bookmarks from '../molecules/Bookmarks'
 import axios from 'axios'
@@ -19,6 +16,7 @@ import { getHighestLiquidityDIDs } from '../../utils/subgraph'
 import { DDO, Logger } from '@oceanprotocol/lib'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../providers/UserPreferences'
+import styles from './Home.module.css'
 
 async function getQueryHighest(
   chainIds: number[]
@@ -76,7 +74,6 @@ function SectionQueryResult({
   const { appConfig } = useSiteMetadata()
   const [result, setResult] = useState<QueryResult>()
   const [loading, setLoading] = useState<boolean>()
-  const { chainIds } = useUserPreferences()
 
   useEffect(() => {
     if (!appConfig.metadataCacheUri) return

src/providers/UrqlProvider.tsx

@@ -1,6 +1,5 @@
 import { createClient, Provider, Client } from 'urql'
 import React, { useState, useEffect, ReactNode, ReactElement } from 'react'
-import { useWeb3 } from './Web3'
 import { Logger } from '@oceanprotocol/lib'
 import { getOceanConfig } from '../utils/ocean'
 
@@ -22,11 +21,16 @@ export default function UrqlClientProvider({
 }: {
   children: ReactNode
 }): ReactElement {
-  const { networkId } = useWeb3()
+  //
+  // Set a default client here based on ETH Mainnet, as that's required for
+  // urql to work.
+  // Throughout code base this client is then used and altered by passing
+  // a new queryContext holding different subgraph URLs.
+  //
   const [client, setClient] = useState<Client>()
 
   useEffect(() => {
-    const oceanConfig = getOceanConfig(networkId || 1)
+    const oceanConfig = getOceanConfig(1)
 
     if (!oceanConfig?.subgraphUri) {
       Logger.error(
@@ -39,8 +43,9 @@ export default function UrqlClientProvider({
     urqlClient = newClient
     setClient(newClient)
     Logger.log(`[URQL] Client connected to ${oceanConfig.subgraphUri}`)
-  }, [networkId])
+  }, [])
 
   return client ? <Provider value={client}>{children}</Provider> : <></>
 }
+
 export { UrqlClientProvider }

src/utils/subgraph.ts

@@ -141,17 +141,17 @@ const HighestLiquidityAssets = gql`
   }
 `
 
-export function getSubgrahUri(chainId: number): string {
+export function getSubgraphUri(chainId: number): string {
   const config = getOceanConfig(chainId)
   return config.subgraphUri
 }
 
 export function getQueryContext(chainId: number): OperationContext {
   const queryContext: OperationContext = {
-    url: `${getSubgrahUri(
+    url: `${getSubgraphUri(
       Number(chainId)
     )}/subgraphs/name/oceanprotocol/ocean-subgraph`,
-    requestPolicy: 'network-only'
+    requestPolicy: 'cache-first'
   }
 
   return queryContext
@@ -180,7 +180,7 @@ export async function fetchDataForMultipleChains(
   let datas: any[] = []
   for (const chainId of chainIds) {
     const context: OperationContext = {
-      url: `${getSubgrahUri(
+      url: `${getSubgraphUri(
         chainId
       )}/subgraphs/name/oceanprotocol/ocean-subgraph`,
       requestPolicy: 'network-only'