diff --git a/src/components/App.tsx b/src/components/App.tsx index 0f290d9f3..f3b31e562 100644 --- a/src/components/App.tsx +++ b/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 ( diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index f669e1b39..7b8587734 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/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' diff --git a/src/components/organisms/AssetContent/EditHistory.tsx b/src/components/organisms/AssetContent/EditHistory.tsx index 38cf34e45..73959c6be 100644 --- a/src/components/organisms/AssetContent/EditHistory.tsx +++ b/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() + + 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() const [creationTx, setCreationTx] = useState() @@ -51,8 +69,7 @@ export default function EditHistory(): ReactElement { {receipts?.map((receipt) => (
  • - edited{' '} -
  • ))} diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx index 2b3019a62..380ece41e 100644 --- a/src/components/pages/Home.tsx +++ b/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() const [loading, setLoading] = useState() - const { chainIds } = useUserPreferences() useEffect(() => { if (!appConfig.metadataCacheUri) return diff --git a/src/providers/UrqlProvider.tsx b/src/providers/UrqlProvider.tsx index 40129be4d..c74d4ce43 100644 --- a/src/providers/UrqlProvider.tsx +++ b/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() 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 ? {children} : <> } + export { UrqlClientProvider } diff --git a/src/utils/subgraph.ts b/src/utils/subgraph.ts index 5279988a0..a2c6362ab 100644 --- a/src/utils/subgraph.ts +++ b/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'