From a017ad219d637139078dcbf4b11b45311535b69e Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 14 Jun 2021 20:04:44 +0200 Subject: [PATCH] move network metadata into a hook --- src/components/atoms/NetworkName.tsx | 27 ++------------- .../UserPreferences/Networks/index.tsx | 22 ++---------- src/components/molecules/Wallet/Details.tsx | 2 +- src/hooks/useNetworkMetadata.ts | 34 +++++++++++++++++++ src/providers/Asset.tsx | 19 +++++------ src/providers/Ocean.tsx | 5 +-- src/providers/Web3.tsx | 7 ++-- 7 files changed, 55 insertions(+), 61 deletions(-) create mode 100644 src/hooks/useNetworkMetadata.ts diff --git a/src/components/atoms/NetworkName.tsx b/src/components/atoms/NetworkName.tsx index 141a7b6de..9ddb777bd 100644 --- a/src/components/atoms/NetworkName.tsx +++ b/src/components/atoms/NetworkName.tsx @@ -1,30 +1,11 @@ -import { graphql, useStaticQuery } from 'gatsby' import React, { ReactElement } from 'react' import { ReactComponent as EthIcon } from '../../images/eth.svg' import { ReactComponent as PolygonIcon } from '../../images/polygon.svg' import { ReactComponent as MoonbeamIcon } from '../../images/moonbeam.svg' import { ReactComponent as BscIcon } from '../../images/bsc.svg' -import { - EthereumListsChain, - getNetworkDataById, - getNetworkDisplayName -} from '../../utils/web3' +import { getNetworkDataById, getNetworkDisplayName } from '../../utils/web3' import styles from './NetworkName.module.css' - -const networksQuery = graphql` - query { - allNetworksMetadataJson { - edges { - node { - chain - network - networkId - chainId - } - } - } - } -` +import useNetworkMetadata from '../../hooks/useNetworkMetadata' export function NetworkIcon({ name }: { name: string }): ReactElement { const IconMapped = name.includes('ETH') @@ -49,9 +30,7 @@ export default function NetworkName({ minimal?: boolean className?: string }): ReactElement { - const data = useStaticQuery(networksQuery) - const networksList: { node: EthereumListsChain }[] = - data.allNetworksMetadataJson.edges + const { networksList } = useNetworkMetadata() const networkData = getNetworkDataById(networksList, networkId) const networkName = getNetworkDisplayName(networkData, networkId) diff --git a/src/components/molecules/UserPreferences/Networks/index.tsx b/src/components/molecules/UserPreferences/Networks/index.tsx index bea054868..388e63e8c 100644 --- a/src/components/molecules/UserPreferences/Networks/index.tsx +++ b/src/components/molecules/UserPreferences/Networks/index.tsx @@ -2,7 +2,6 @@ import React, { ReactElement } from 'react' import Label from '../../../atoms/Input/Label' import { useSiteMetadata } from '../../../../hooks/useSiteMetadata' import FormHelp from '../../../atoms/Input/Help' -import { useStaticQuery, graphql } from 'gatsby' import { EthereumListsChain, getNetworkDataById } from '../../../../utils/web3' import Tooltip from '../../../atoms/Tooltip' import { ReactComponent as Caret } from '../../../../images/caret.svg' @@ -10,21 +9,7 @@ import { ReactComponent as Network } from '../../../../images/network.svg' import NetworksList from './NetworksList' import stylesIndex from '../index.module.css' import styles from './index.module.css' - -const networksQuery = graphql` - query { - allNetworksMetadataJson { - edges { - node { - chain - network - networkId - chainId - } - } - } - } -` +import useNetworkMetadata from '../../../../hooks/useNetworkMetadata' function filterNetworksByType( type: 'mainnet' | 'testnet', @@ -45,10 +30,7 @@ function filterNetworksByType( } export default function Networks(): ReactElement { - const data = useStaticQuery(networksQuery) - const networksList: { node: EthereumListsChain }[] = - data.allNetworksMetadataJson.edges - + const { networksList } = useNetworkMetadata() const { appConfig } = useSiteMetadata() const networksMain = filterNetworksByType( diff --git a/src/components/molecules/Wallet/Details.tsx b/src/components/molecules/Wallet/Details.tsx index 5905f511f..77ae056be 100644 --- a/src/components/molecules/Wallet/Details.tsx +++ b/src/components/molecules/Wallet/Details.tsx @@ -33,7 +33,7 @@ export default function Details(): ReactElement { useEffect(() => { if (!networkData) return - setMainCurrency(networkData.nativeCurrency.symbol) + setMainCurrency(networkData.nativeCurrency?.symbol) const oceanConfig = getOceanConfig(networkId) diff --git a/src/hooks/useNetworkMetadata.ts b/src/hooks/useNetworkMetadata.ts new file mode 100644 index 000000000..78bd9b3bd --- /dev/null +++ b/src/hooks/useNetworkMetadata.ts @@ -0,0 +1,34 @@ +import { useStaticQuery, graphql } from 'gatsby' +import { EthereumListsChain } from '../utils/web3' + +export interface UseNetworkMetadata { + networksList: { node: EthereumListsChain }[] +} + +const networksQuery = graphql` + query { + allNetworksMetadataJson { + edges { + node { + chain + network + networkId + chainId + nativeCurrency { + name + symbol + decimals + } + } + } + } + } +` + +export default function useNetworkMetadata(): UseNetworkMetadata { + const data = useStaticQuery(networksQuery) + const networksList: { node: EthereumListsChain }[] = + data.allNetworksMetadataJson.edges + + return { networksList } +} diff --git a/src/providers/Asset.tsx b/src/providers/Asset.tsx index c265407d8..b32d5bc7a 100644 --- a/src/providers/Asset.tsx +++ b/src/providers/Asset.tsx @@ -14,21 +14,20 @@ import axios, { CancelToken } from 'axios' import { retrieveDDO } from '../utils/aquarius' import { getPrice } from '../utils/subgraph' import { MetadataMarket } from '../@types/MetaData' -import { DDO_TEMPORARY, useOcean } from './Ocean' +import { DDO_TEMPORARY } from './Ocean' import { useWeb3 } from './Web3' -import { getOceanConfig } from '../utils/ocean' import { useSiteMetadata } from '../hooks/useSiteMetadata' interface AssetProviderValue { isInPurgatory: boolean purgatoryData: PurgatoryData - ddo: DDO | undefined - did: string | undefined - metadata: MetadataMarket | undefined - title: string | undefined - owner: string | undefined - price: BestPrice | undefined - type: MetadataMain['type'] | undefined + ddo: DDO + did: string + metadata: MetadataMarket + title: string + owner: string + price: BestPrice + type: MetadataMain['type'] error?: string refreshInterval: number isAssetNetwork: boolean @@ -60,7 +59,7 @@ function AssetProvider({ const [owner, setOwner] = useState() const [error, setError] = useState() const [type, setType] = useState() - const [loading, setLoading] = useState(false) + const [loading, setLoading] = useState(false) const [isAssetNetwork, setIsAssetNetwork] = useState() const fetchDdo = async (token?: CancelToken) => { diff --git a/src/providers/Ocean.tsx b/src/providers/Ocean.tsx index 1fc47c1bf..1797f95d8 100644 --- a/src/providers/Ocean.tsx +++ b/src/providers/Ocean.tsx @@ -70,10 +70,11 @@ function OceanProvider({ children }: { children: ReactNode }): ReactElement { // Initial connection // ----------------------------------- useEffect(() => { - // if (!ddo?.chainId) return + // TODO: remove DDO typing once ocean.js has it + if (!(ddo as DDO_TEMPORARY)?.chainId) return const config = { - ...getOceanConfig((ddo as DDO_TEMPORARY)?.chainId || 1), + ...getOceanConfig((ddo as DDO_TEMPORARY)?.chainId), // add local dev values ...((ddo as DDO_TEMPORARY)?.chainId === 8996 && { diff --git a/src/providers/Web3.tsx b/src/providers/Web3.tsx index 93217ee80..fad48af4a 100644 --- a/src/providers/Web3.tsx +++ b/src/providers/Web3.tsx @@ -18,9 +18,10 @@ import { getNetworkDataById, getNetworkDisplayName } from '../utils/web3' -import { graphql, useStaticQuery } from 'gatsby' +import { graphql } from 'gatsby' import { UserBalance } from '../@types/TokenBalance' import { getOceanBalance } from '../utils/ocean' +import useNetworkMetadata from '../hooks/useNetworkMetadata' interface Web3ProviderValue { web3: Web3 @@ -105,9 +106,7 @@ const networksQuery = graphql` const Web3Context = createContext({} as Web3ProviderValue) function Web3Provider({ children }: { children: ReactNode }): ReactElement { - const data = useStaticQuery(networksQuery) - const networksList: { node: EthereumListsChain }[] = - data.allNetworksMetadataJson.edges + const { networksList } = useNetworkMetadata() const [web3, setWeb3] = useState() const [web3Provider, setWeb3Provider] = useState()