move network metadata into a hook

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 {
+import { getNetworkDataById, getNetworkDisplayName } from '../../utils/web3'
-  EthereumListsChain,
-  getNetworkDataById,
-  getNetworkDisplayName
-} from '../../utils/web3'
 import styles from './NetworkName.module.css'
-
+import useNetworkMetadata from '../../hooks/useNetworkMetadata'
-const networksQuery = graphql`
-  query {
-    allNetworksMetadataJson {
-      edges {
-        node {
-          chain
-          network
-          networkId
-          chainId
-        }
-      }
-    }
-  }
-`
 
 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 } = useNetworkMetadata()
-  const networksList: { node: EthereumListsChain }[] =
-    data.allNetworksMetadataJson.edges
   const networkData = getNetworkDataById(networksList, networkId)
   const networkName = getNetworkDisplayName(networkData, networkId)
 

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'
-
+import useNetworkMetadata from '../../../../hooks/useNetworkMetadata'
-const networksQuery = graphql`
-  query {
-    allNetworksMetadataJson {
-      edges {
-        node {
-          chain
-          network
-          networkId
-          chainId
-        }
-      }
-    }
-  }
-`
 
 function filterNetworksByType(
   type: 'mainnet' | 'testnet',
@@ -45,10 +30,7 @@ function filterNetworksByType(
 }
 
 export default function Networks(): ReactElement {
-  const data = useStaticQuery(networksQuery)
+  const { networksList } = useNetworkMetadata()
-  const networksList: { node: EthereumListsChain }[] =
-    data.allNetworksMetadataJson.edges
-
   const { appConfig } = useSiteMetadata()
 
   const networksMain = filterNetworksByType(

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)
 

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 }
+}

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
+  ddo: DDO
-  did: string | undefined
+  did: string
-  metadata: MetadataMarket | undefined
+  metadata: MetadataMarket
-  title: string | undefined
+  title: string
-  owner: string | undefined
+  owner: string
-  price: BestPrice | undefined
+  price: BestPrice
-  type: MetadataMain['type'] | undefined
+  type: MetadataMain['type']
   error?: string
   refreshInterval: number
   isAssetNetwork: boolean
@@ -60,7 +59,7 @@ function AssetProvider({
   const [owner, setOwner] = useState<string>()
   const [error, setError] = useState<string>()
   const [type, setType] = useState<MetadataMain['type']>()
-  const [loading, setLoading] = useState<boolean>(false)
+  const [loading, setLoading] = useState(false)
   const [isAssetNetwork, setIsAssetNetwork] = useState<boolean>()
 
   const fetchDdo = async (token?: CancelToken) => {

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 && {

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 } = useNetworkMetadata()
-  const networksList: { node: EthereumListsChain }[] =
-    data.allNetworksMetadataJson.edges
 
   const [web3, setWeb3] = useState<Web3>()
   const [web3Provider, setWeb3Provider] = useState<any>()