mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
move network metadata into a hook
This commit is contained in:
parent
88bead1474
commit
a017ad219d
@ -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)
|
||||
|
||||
|
@ -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(
|
||||
|
@ -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)
|
||||
|
||||
|
34
src/hooks/useNetworkMetadata.ts
Normal file
34
src/hooks/useNetworkMetadata.ts
Normal file
@ -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 }
|
||||
}
|
@ -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<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) => {
|
||||
|
@ -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 && {
|
||||
|
@ -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<Web3>()
|
||||
const [web3Provider, setWeb3Provider] = useState<any>()
|
||||
|
Loading…
Reference in New Issue
Block a user