oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

refactor and tinkering

Browse Source
This commit is contained in:
Matthias Kretschmann 2021-05-28 14:47:47 +02:00
parent 6bc37b9b7b
commit 3332249928
Signed by: m
GPG Key ID: 606EEEF3C479A91F
26 changed files with 199 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -132,19 +132,15 @@ const queryLatest = {
}
function Component() {
const { config } = useOcean()
const { metadataCacheUri } = useOcean()
const [result, setResult] = useState<QueryResult>()
useEffect(() => {
if (!config?.metadataCacheUri) return
if (!metadataCacheUri) return
const source = axios.CancelToken.source()
async function init() {
const result = await queryMetadata(
query,
config.metadataCacheUri,
source.token
)
const result = await queryMetadata(query, metadataCacheUri, source.token)
setResult(result)
}
init()
@ -152,7 +148,7 @@ function Component() {
return () => {
source.cancel()
}
}, [config?.metadataCacheUri, query])
}, [metadataCacheUri, query])
return <div>{result}</div>
}

8
app.config.js
View File

@ -1,9 +1,7 @@
module.exports = {
// The default network and its associated config the app should connect to
// on start. App will automatically switch network configs when user switches
// networks in their wallet.
// Ocean Protocol contracts are deployed for: 'mainnet', 'rinkeby', 'development'
network: process.env.GATSBY_NETWORK || 'mainnet',
// List of supported chainIds which metadata cache queries
// will return by default
chainIds: [1, 3, 4, 137, 1287],
infuraProjectId: process.env.GATSBY_INFURA_PROJECT_ID || 'xxx',

6
src/components/App.tsx
View File

@ -40,17 +40,17 @@ export default function App({
const { warning } = useSiteMetadata()
const { accountId } = useWeb3()
const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
const { isGraphSynced, blockHead, blockGraph } = useGraphSyncStatus()
// const { isGraphSynced, blockHead, blockGraph } = useGraphSyncStatus()
return (
<Styles>
<div className={styles.app}>
{!isGraphSynced && (
{/* {!isGraphSynced && (
<AnnouncementBanner
text={`The data for this network has only synced to Ethereum block ${blockGraph} (out of ${blockHead}). Please check back soon.`}
state="error"
/>
)}
)} */}
<Header />
{(props as PageProps).uri === '/' && (

12
src/components/molecules/AssetListTitle.tsx
View File

@ -15,11 +15,11 @@ export default function AssetListTitle({
did?: string
title?: string
}): ReactElement {
const { config } = useOcean()
const { metadataCacheUri } = useOcean()
const [assetTitle, setAssetTitle] = useState<string>(title)
useEffect(() => {
if (title || !config?.metadataCacheUri) return
if (title || !metadataCacheUri) return
if (ddo) {
const { attributes } = ddo.findServiceByType('metadata')
setAssetTitle(attributes.main.name)
@ -29,11 +29,7 @@ export default function AssetListTitle({
const source = axios.CancelToken.source()
async function getAssetName() {
const title = await getAssetsNames(
[did],
config.metadataCacheUri,
source.token
)
const title = await getAssetsNames([did], metadataCacheUri, source.token)
setAssetTitle(title[did])
}
@ -42,7 +38,7 @@ export default function AssetListTitle({
return () => {
source.cancel()
}
}, [assetTitle, config?.metadataCacheUri, ddo, did, title])
}, [assetTitle, metadataCacheUri, ddo, did, title])
return (
<h3 className={styles.title}>

8
src/components/molecules/Bookmarks.tsx
View File

@ -78,7 +78,7 @@ const columns = [
]
export default function Bookmarks(): ReactElement {
const { config } = useOcean()
const { metadataCacheUri } = useOcean()
const { bookmarks } = useUserPreferences()
const [pinned, setPinned] = useState<DDO[]>()
@ -87,7 +87,7 @@ export default function Bookmarks(): ReactElement {
const networkName = (config as ConfigHelperConfig)?.network
useEffect(() => {
if (!config?.metadataCacheUri || !networkName || bookmarks === {}) return
if (!metadataCacheUri || !networkName || bookmarks === {}) return
const source = axios.CancelToken.source()
@ -102,7 +102,7 @@ export default function Bookmarks(): ReactElement {
try {
const resultPinned = await getAssetsBookmarked(
bookmarks[networkName],
config.metadataCacheUri,
metadataCacheUri,
source.token
)
setPinned(resultPinned?.results)
@ -117,7 +117,7 @@ export default function Bookmarks(): ReactElement {
return () => {
source.cancel()
}
}, [bookmarks, config.metadataCacheUri, networkName])
}, [bookmarks, metadataCacheUri, networkName])
return (
<Table

9
src/components/molecules/UserPreferences/Chain.tsx
View File

@ -1,7 +1,6 @@
import { ConfigHelperConfig } from '@oceanprotocol/lib'
import React, { ReactElement, ChangeEvent } from 'react'
import { useOcean } from '../../../providers/Ocean'
import { useWeb3 } from '../../../providers/Web3'
import { getOceanConfig } from '../../../utils/ocean'
import FormHelp from '../../atoms/Input/Help'
import Label from '../../atoms/Input/Label'
@ -12,7 +11,6 @@ import { ReactComponent as MoonbeamIcon } from '../../../images/moonbeam.svg'
import styles from './Chain.module.css'
export default function Chain(): ReactElement {
const { web3 } = useWeb3()
const { config, connect } = useOcean()
async function connectOcean(event: ChangeEvent<HTMLInputElement>) {
@ -48,10 +46,7 @@ export default function Chain(): ReactElement {
}
]
// TODO: to fully solve https://github.com/oceanprotocol/market/issues/432
// there are more considerations for users with a wallet connected (wallet network vs. setting network).
// For now, only show the setting for non-wallet users.
return !web3 ? (
return (
<li className={styles.chains}>
<Label htmlFor="">Chain</Label>
<BoxSelection
@ -61,5 +56,5 @@ export default function Chain(): ReactElement {
/>
<FormHelp>Switch the data source for the interface.</FormHelp>
</li>
) : null
)
}

2
src/components/molecules/UserPreferences/index.tsx
View File

@ -20,7 +20,7 @@ export default function UserPreferences(): ReactElement {
<ul className={styles.preferencesDetails}>
<Currency />
<Appearance darkMode={darkMode} />
<Chain />
{/* <Chain /> */}
<Debug />
</ul>
}

12
src/components/molecules/Wallet/Details.tsx
View File

@ -12,8 +12,8 @@ import styles from './Details.module.css'
export default function Details(): ReactElement {
const { web3Provider, web3ProviderInfo, connect, logout, networkData } =
useWeb3()
const { balance, config } = useOcean()
} = useWeb3()
// const { balance, config } = useOcean()
const { locale } = useUserPreferences()
const [mainCurrency, setMainCurrency] = useState<string>()
@ -38,7 +38,7 @@ export default function Details(): ReactElement {
return (
<div className={styles.details}>
<ul>
{Object.entries(balance).map(([key, value]) => (
{/* {Object.entries(balance).map(([key, value]) => (
<li className={styles.balance} key={key}>
<span className={styles.symbol}>
{key === 'eth' ? mainCurrency : config.oceanTokenSymbol}
@ -48,7 +48,7 @@ export default function Details(): ReactElement {
})}
{key === 'ocean' && <Conversion price={value} />}
</li>
))}
))} */}
<li className={styles.actions}>
<div title="Connected provider" className={styles.walletInfo}>
@ -66,14 +66,14 @@ export default function Details(): ReactElement {
onChange={handlePortisNetworkChange}
/>
)} */}
{web3ProviderInfo?.name === 'MetaMask' && (
{/* {web3ProviderInfo?.name === 'MetaMask' && (
<AddToken
address={config.oceanTokenAddress}
symbol={config.oceanTokenSymbol}
logo="https://raw.githubusercontent.com/oceanprotocol/art/main/logo/token.png"
className={styles.addToken}
/>
)}
)} */}
</div>
<p>
{web3ProviderInfo?.name === 'Portis' && (

9
src/components/molecules/Wallet/Network.tsx
View File

@ -10,21 +10,18 @@ import styles from './Network.module.css'
export default function Network(): ReactElement {
const { networkId, isTestnet } = useWeb3()
const { config } = useOcean()
const networkIdConfig = (config as ConfigHelperConfig).networkId
const [isSupportedNetwork, setIsSupportedNetwork] = useState<boolean>()
useEffect(() => {
// take network from user when present,
// otherwise use the default configured one of app
const network = networkId || networkIdConfig
// take network from user when present
const network = networkId || 1
// Check networkId against ocean.js ConfigHelper configs
// to figure out if network is supported.
const isSupportedNetwork = Boolean(new ConfigHelper().getConfig(network))
setIsSupportedNetwork(isSupportedNetwork)
}, [networkId, networkIdConfig])
}, [networkId])
return networkId ? (
<div className={styles.network}>

30
src/components/molecules/Web3Feedback.tsx
View File

@ -1,5 +1,5 @@
import React, { ReactElement } from 'react'
import { useOcean } from '../../providers/Ocean'
import { useWeb3 } from '../../providers/Web3'
import Status from '../atoms/Status'
import styles from './Web3Feedback.module.css'
@ -16,36 +16,36 @@ export default function Web3Feedback({
isBalanceSufficient?: boolean
isAssetNetwork?: boolean
}): ReactElement {
const { account, ocean } = useOcean()
const { accountId } = useWeb3()
const showFeedback =
!account ||
!ocean ||
!accountId ||
// !ocean ||
isBalanceSufficient === false ||
isAssetNetwork === false
const state = !account
const state = !accountId
? 'error'
: account && isBalanceSufficient && isAssetNetwork
: accountId && isBalanceSufficient && isAssetNetwork
? 'success'
: 'warning'
const title = !account
const title = !accountId
? 'No account connected'
: !ocean
? 'Error connecting to Ocean'
: account && isAssetNetwork === false
: // : !ocean
// ? 'Error connecting to Ocean'
accountId && isAssetNetwork === false
? 'Wrong network'
: account
: accountId
? isBalanceSufficient === false
? 'Insufficient balance'
: 'Connected to Ocean'
: 'Something went wrong'
const message = !account
const message = !accountId
? 'Please connect your Web3 wallet.'
: !ocean
? 'Please try again.'
: isBalanceSufficient === false
: // : !ocean
// ? 'Please try again.'
isBalanceSufficient === false
? 'You do not have enough OCEAN in your wallet to purchase this asset.'
: isAssetNetwork === false
? 'Connect to the asset network.'

6
src/components/organisms/AssetActions/Compute/index.tsx
View File

@ -55,7 +55,7 @@ export default function Compute({
}): ReactElement {
const { appConfig } = useSiteMetadata()
const { accountId } = useWeb3()
const { ocean, account, config } = useOcean()
const { ocean, account, metadataCacheUri } = useOcean()
const { price, type, ddo, isAssetNetwork } = useAsset()
const { buyDT, pricingError, pricingStepText } = usePricing()
const [isJobStarting, setIsJobStarting] = useState(false)
@ -150,13 +150,13 @@ export default function Compute({
getQuerryString(
computeService.attributes.main.privacy.publisherTrustedAlgorithms
),
config.metadataCacheUri,
metadataCacheUri,
source.token
)
setDdoAlgorithmList(gueryResults.results)
algorithmSelectionList = await transformDDOToAssetSelection(
gueryResults.results,
config.metadataCacheUri,
metadataCacheUri,
[]
)
}

8
src/components/organisms/AssetActions/Edit/FormEditComputeDataset.tsx
View File

@ -27,7 +27,7 @@ export default function FormEditComputeDataset({
setShowEdit: (show: boolean) => void
}): ReactElement {
const { accountId } = useWeb3()
const { ocean, config } = useOcean()
const { ocean, metadataCacheUri } = useOcean()
const { ddo } = useAsset()
const { isValid, values }: FormikContextType<ComputePrivacyForm> =
useFormikContext()
@ -51,12 +51,12 @@ export default function FormEditComputeDataset({
}
const querryResult = await queryMetadata(
query,
config.metadataCacheUri,
metadataCacheUri,
source.token
)
const algorithmSelectionList = await transformDDOToAssetSelection(
querryResult.results,
config.metadataCacheUri,
metadataCacheUri,
publisherTrustedAlgorithms
)
return algorithmSelectionList
@ -66,7 +66,7 @@ export default function FormEditComputeDataset({
getAlgorithmList(publisherTrustedAlgorithms).then((algorithms) => {
setAllAlgorithms(algorithms)
})
}, [config.metadataCacheUri, publisherTrustedAlgorithms])
}, [metadataCacheUri, publisherTrustedAlgorithms])
return (
<Form className={styles.form}>

4
src/components/organisms/Footer.tsx
View File

@ -14,8 +14,8 @@ export default function Footer(): ReactElement {
return (
<footer className={styles.footer}>
<div className={styles.content}>
<SyncStatus /> | <BuildId />
<MarketStats />
{/* <SyncStatus /> | <BuildId />
<MarketStats /> */}
<div className={styles.copyright}>
© {year} <Markdown text={copyright} /> —{' '}
<Link to="/terms">Terms</Link>

10
src/components/pages/History/ComputeJobs/Details.tsx
View File

@ -41,7 +41,7 @@ function Asset({
}
function DetailsAssets({ job }: { job: ComputeJobMetaData }) {
const { config } = useOcean()
const { metadataCacheUri } = useOcean()
const [algoName, setAlgoName] = useState<string>()
const [algoDtSymbol, setAlgoDtSymbol] = useState<string>()
@ -49,18 +49,14 @@ function DetailsAssets({ job }: { job: ComputeJobMetaData }) {
async function getAlgoMetadata() {
const source = axios.CancelToken.source()
const ddo = await retrieveDDO(
job.algoDID,
config.metadataCacheUri,
source.token
)
const ddo = await retrieveDDO(job.algoDID, metadataCacheUri, source.token)
setAlgoDtSymbol(ddo.dataTokenInfo.symbol)
const { attributes } = ddo.findServiceByType('metadata')
setAlgoName(attributes?.main.name)
}
getAlgoMetadata()
}, [config?.metadataCacheUri, job.algoDID])
}, [metadataCacheUri, job.algoDID])
return (
<>

8
src/components/pages/History/ComputeJobs/index.tsx
View File

@ -99,7 +99,7 @@ async function getAssetMetadata(
}
export default function ComputeJobs(): ReactElement {
const { ocean, account, config } = useOcean()
const { ocean, account, metadataCacheUri, config } = useOcean()
const { accountId } = useWeb3()
const [isLoading, setIsLoading] = useState(true)
const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
@ -128,7 +128,7 @@ export default function ComputeJobs(): ReactElement {
const source = axios.CancelToken.source()
const assets = await getAssetMetadata(
queryDtList,
config.metadataCacheUri,
metadataCacheUri,
source.token
)
const providers: Provider[] = []
@ -232,12 +232,12 @@ export default function ComputeJobs(): ReactElement {
}
useEffect(() => {
if (data === undefined || !config?.metadataCacheUri) {
if (data === undefined || !metadataCacheUri) {
setIsLoading(false)
return
}
getJobs()
}, [ocean, account, data, config?.metadataCacheUri])
}, [ocean, account, data, metadataCacheUri])
return (
<>

12
src/components/pages/History/Downloads.tsx
View File

@ -61,10 +61,10 @@ export default function ComputeDownloads(): ReactElement {
const { data } = useQuery(getTokenOrders, {
variables: { user: accountId?.toLowerCase() }
})
const { config } = useOcean()
const { metadataCacheUri } = useOcean()
useEffect(() => {
if (!config.metadataCacheUri || !data) return
if (!metadataCacheUri || !data) return
async function filterAssets() {
const filteredOrders: DownloadedAssets[] = []
@ -76,11 +76,7 @@ export default function ComputeDownloads(): ReactElement {
const did = web3.utils
.toChecksumAddress(data.tokenOrders[i].datatokenId.address)
.replace('0x', 'did:op:')
const ddo = await retrieveDDO(
did,
config?.metadataCacheUri,
source.token
)
const ddo = await retrieveDDO(did, metadataCacheUri, source.token)
if (ddo.service[1].type === 'access') {
filteredOrders.push({
did: did,
@ -98,7 +94,7 @@ export default function ComputeDownloads(): ReactElement {
}
filterAssets()
}, [config?.metadataCacheUri, data])
}, [metadataCacheUri, data])
return (
<Table

6
src/components/pages/History/PublishedList.tsx
View File

@ -9,7 +9,7 @@ import { useOcean } from '../../../providers/Ocean'
export default function PublishedList(): ReactElement {
const { accountId } = useWeb3()
const { config } = useOcean()
const { metadataCacheUri } = useOcean()
const [queryResult, setQueryResult] = useState<QueryResult>()
const [isLoading, setIsLoading] = useState(false)
@ -34,7 +34,7 @@ export default function PublishedList(): ReactElement {
queryResult || setIsLoading(true)
const result = await queryMetadata(
queryPublishedAssets,
config.metadataCacheUri,
metadataCacheUri,
source.token
)
setQueryResult(result)
@ -45,7 +45,7 @@ export default function PublishedList(): ReactElement {
}
}
getPublished()
}, [accountId, page, config.metadataCacheUri])
}, [accountId, page, metadataCacheUri])
return accountId ? (
<AssetList

10
src/components/pages/Home.tsx
View File

@ -45,12 +45,12 @@ function SectionQueryResult({
action?: ReactElement
queryData?: string
}) {
const { config } = useOcean()
const { metadataCacheUri } = useOcean()
const [result, setResult] = useState<QueryResult>()
const [loading, setLoading] = useState<boolean>()
useEffect(() => {
if (!config?.metadataCacheUri) return
if (!metadataCacheUri) return
const source = axios.CancelToken.source()
async function init() {
@ -58,7 +58,7 @@ function SectionQueryResult({
setLoading(true)
const result = await queryMetadata(
query,
config.metadataCacheUri,
metadataCacheUri,
source.token
)
if (result.totalResults <= 15) {
@ -83,7 +83,7 @@ function SectionQueryResult({
return () => {
source.cancel()
}
}, [query, config?.metadataCacheUri])
}, [metadataCacheUri, query])
return (
<section className={styles.section}>
@ -128,7 +128,7 @@ export default function HomePage(): ReactElement {
<section className={styles.section}>
<h3>Bookmarks</h3>
<Bookmarks />
{/* <Bookmarks /> */}
</section>
{queryAndDids && (

2
src/components/templates/PageAssetDetails.tsx
View File

@ -24,13 +24,11 @@ export default function PageTemplateAssetDetails({
}, [ddo, error, isInPurgatory, title])
return ddo && pageTitle ? (
<>
<Page title={pageTitle} uri={uri}>
<Router basepath="/asset">
<AssetContent path=":did" />
</Router>
</Page>
</>
) : error ? (
<Page title={pageTitle} noPageHeader uri={uri}>
<Alert title={pageTitle} text={error} state="error" />

17
src/components/templates/Search/index.tsx
View File

@ -19,7 +19,7 @@ export default function SearchPage({
location: Location
setTotalResults: (totalResults: number) => void
}): ReactElement {
const { config } = useOcean()
const { metadataCacheUri } = useOcean()
const parsed = queryString.parse(location.search)
const { text, owner, tags, page, sort, sortOrder, serviceType } = parsed
const [queryResult, setQueryResult] = useState<QueryResult>()
@ -31,27 +31,18 @@ export default function SearchPage({
)
useEffect(() => {
if (!config?.metadataCacheUri) return
if (!metadataCacheUri) return
async function initSearch() {
setLoading(true)
setTotalResults(undefined)
const queryResult = await getResults(parsed, config.metadataCacheUri)
const queryResult = await getResults(parsed, metadataCacheUri)
setQueryResult(queryResult)
setTotalResults(queryResult.totalResults)
setLoading(false)
}
initSearch()
}, [
text,
owner,
tags,
sort,
page,
serviceType,
sortOrder,
config.metadataCacheUri
])
}, [text, owner, tags, sort, page, serviceType, sortOrder, metadataCacheUri])
function setPage(page: number) {
const newUrl = updateQueryStringParameter(

14
src/helpers/wrapRootElement.tsx
View File

@ -1,30 +1,18 @@
import React, { ReactElement } from 'react'
import Web3Provider from '../providers/Web3'
import appConfig from '../../app.config'
import { UserPreferencesProvider } from '../providers/UserPreferences'
import PricesProvider from '../providers/Prices'
import ApolloClientProvider from '../providers/ApolloClientProvider'
import OceanProvider from '../providers/Ocean'
import { getDevelopmentConfig, getOceanConfig } from '../utils/ocean'
export default function wrapRootElement({
element
}: {
element: ReactElement
}): ReactElement {
const { network } = appConfig
const oceanInitialConfig = {
...getOceanConfig(network),
// add local dev values
...(network === 'development' && {
...getDevelopmentConfig()
})
}
return (
<Web3Provider>
<OceanProvider initialConfig={oceanInitialConfig}>
<OceanProvider>
<ApolloClientProvider>
<UserPreferencesProvider>
<PricesProvider>{element}</PricesProvider>

4
src/hooks/useSiteMetadata.ts
View File

@ -21,7 +21,7 @@ interface UseSiteMetadata {
}
appConfig: {
infuraProjectId: string
network: string
chainIds: number[]
marketFeeAddress: string
currencies: string[]
portisId: string
@ -53,7 +53,7 @@ const query = graphql`
}
appConfig {
infuraProjectId
network
chainIds
marketFeeAddress
currencies
portisId

12
src/providers/Asset.tsx
View File

@ -45,7 +45,7 @@ function AssetProvider({
children: ReactNode
}): ReactElement {
const { networkId } = useWeb3()
const { config } = useOcean()
const { metadataCacheUri } = useOcean()
const [isInPurgatory, setIsInPurgatory] = useState(false)
const [purgatoryData, setPurgatoryData] = useState<PurgatoryData>()
const [ddo, setDDO] = useState<DDO>()
@ -60,11 +60,7 @@ function AssetProvider({
const fetchDdo = async (token?: CancelToken) => {
Logger.log('[asset] Init asset, get DDO')
const ddo = await retrieveDDO(
asset as string,
config.metadataCacheUri,
token
)
const ddo = await retrieveDDO(asset as string, metadataCacheUri, token)
if (!ddo) {
setError(
@ -86,7 +82,7 @@ function AssetProvider({
// Get and set DDO based on passed DDO or DID
//
useEffect(() => {
if (!asset || !config?.metadataCacheUri) return
if (!asset || !metadataCacheUri) return
const source = axios.CancelToken.source()
let isMounted = true
@ -103,7 +99,7 @@ function AssetProvider({
isMounted = false
source.cancel()
}
}, [asset, config?.metadataCacheUri])
}, [asset, metadataCacheUri])
const setPurgatory = useCallback(async (did: string): Promise<void> => {
if (!did) return

160
src/providers/Ocean.tsx
View File

@ -22,10 +22,13 @@ import {
getUserInfo
} from '../utils/ocean'
import { UserBalance } from '../@types/TokenBalance'
import { useSiteMetadata } from '../hooks/useSiteMetadata'
const refreshInterval = 20000 // 20 sec.
interface OceanProviderValue {
oceanConfigs: ConfigHelperConfig[]
metadataCacheUri: string
ocean: Ocean
config: ConfigHelperConfig
account: Account
@ -37,99 +40,85 @@ interface OceanProviderValue {
const OceanContext = createContext({} as OceanProviderValue)
function OceanProvider({
initialConfig,
children
}: {
initialConfig: Config | ConfigHelperConfig
children: ReactNode
}): ReactElement {
function OceanProvider({ children }: { children: ReactNode }): ReactElement {
const { appConfig } = useSiteMetadata()
const { web3, accountId, networkId } = useWeb3()
const [oceanConfigs, setOceanConfigs] = useState<ConfigHelperConfig[]>()
const [metadataCacheUri, setMetadataCacheUri] = useState<string>()
const [ocean, setOcean] = useState<Ocean>()
const [account, setAccount] = useState<Account>()
const [balance, setBalance] = useState<UserBalance>({
eth: undefined,
ocean: undefined
})
const [config, setConfig] =
useState<ConfigHelperConfig | Config>(initialConfig)
const [loading, setLoading] = useState<boolean>()
const [config, setConfig] = useState<ConfigHelperConfig | Config>()
// -----------------------------------
// Initially get all supported configs
// from ocean.js ConfigHelper
// -----------------------------------
useEffect(() => {
const allConfigs = appConfig.chainIds.map((chainId: number) =>
getOceanConfig(chainId)
)
setOceanConfigs(allConfigs)
setMetadataCacheUri(allConfigs[0].metadataCacheUri)
}, [])
// -----------------------------------
// Set active config
// -----------------------------------
// useEffect(() => {
// const config = {
// ...getOceanConfig(networkId || 'mainnet'),
// // add local dev values
// ...(networkId === 8996 && {
// ...getDevelopmentConfig()
// })
// }
// setConfig(config)
// // Sync config.metadataCacheUri with metadataCacheUri
// setMetadataCacheUri(config.metadataCacheUri)
// }, [networkId])
// -----------------------------------
// Create Ocean instance
// -----------------------------------
const connect = useCallback(
async (newConfig?: ConfigHelperConfig | Config) => {
setLoading(true)
async (config: ConfigHelperConfig | Config) => {
if (!web3) return
try {
const usedConfig = newConfig || config
Logger.log('[ocean] Connecting Ocean...', usedConfig)
usedConfig.web3Provider = web3 || initialConfig.web3Provider
Logger.log('[ocean] Connecting Ocean...', config)
if (newConfig) {
await setConfig(usedConfig)
}
config.web3Provider = web3
setConfig(config)
if (usedConfig.web3Provider) {
const newOcean = await Ocean.getInstance(usedConfig)
await setOcean(newOcean)
const newOcean = await Ocean.getInstance(config)
setOcean(newOcean)
Logger.log('[ocean] Ocean instance created.', newOcean)
}
setLoading(false)
} catch (error) {
Logger.error('[ocean] Error: ', error.message)
}
},
[web3, config, initialConfig.web3Provider]
[web3]
)
async function refreshBalance() {
if (!ocean || !account || !web3) return
// async function refreshBalance() {
// if (!ocean || !account || !web3) return
const { balance } = await getUserInfo(ocean)
setBalance(balance)
}
// const { balance } = await getUserInfo(ocean)
// setBalance(balance)
// }
// -----------------------------------
// Initial connection
// -----------------------------------
useEffect(() => {
async function init() {
await connect()
}
init()
// init periodic refresh of wallet balance
const balanceInterval = setInterval(() => refreshBalance(), refreshInterval)
return () => {
clearInterval(balanceInterval)
}
}, [])
// -----------------------------------
// Get user info, handle account change from web3
// -----------------------------------
useEffect(() => {
if (!ocean || !accountId || !web3) return
async function getInfo() {
const { account, balance } = await getUserInfo(ocean)
setAccount(account)
setBalance(balance)
}
getInfo()
}, [ocean, accountId, web3])
// -----------------------------------
// Handle network change from web3
// -----------------------------------
useEffect(() => {
if (!networkId) return
async function reconnect() {
const newConfig = {
...getOceanConfig(networkId),
const config = {
...getOceanConfig('mainnet'),
// add local dev values
...(networkId === 8996 && {
@ -137,28 +126,45 @@ function OceanProvider({
})
}
try {
setLoading(true)
await connect(newConfig)
setLoading(false)
} catch (error) {
Logger.error('[ocean] Error: ', error.message)
async function init() {
await connect(config)
}
}
reconnect()
}, [networkId])
init()
// init periodic refresh of wallet balance
// const balanceInterval = setInterval(() => refreshBalance(), refreshInterval)
// return () => {
// clearInterval(balanceInterval)
// }
}, [connect, networkId])
// -----------------------------------
// Get user info, handle account change from web3
// -----------------------------------
// useEffect(() => {
// if (!ocean || !accountId || !web3) return
// async function getInfo() {
// const { account, balance } = await getUserInfo(ocean)
// setAccount(account)
// setBalance(balance)
// }
// getInfo()
// }, [ocean, accountId, web3])
return (
<OceanContext.Provider
value={
{
oceanConfigs,
metadataCacheUri,
ocean,
account,
balance,
config,
loading,
connect,
refreshBalance
connect
// refreshBalance
} as OceanProviderValue
}
>

42
src/providers/UserPreferences.tsx
View File

@ -45,8 +45,8 @@ function UserPreferencesProvider({
}: {
children: ReactNode
}): ReactElement {
const { config } = useOcean()
const networkName = (config as ConfigHelperConfig).network
// const { config } = useOcean()
// const networkName = (config as ConfigHelperConfig).network
const localStorage = getLocalStorage()
// Set default values from localStorage
@ -75,23 +75,23 @@ function UserPreferencesProvider({
setLocale(window.navigator.language)
}, [])
function addBookmark(didToAdd: string): void {
const newPinned = {
...bookmarks,
[networkName]: [didToAdd].concat(bookmarks[networkName])
}
setBookmarks(newPinned)
}
// function addBookmark(didToAdd: string): void {
// const newPinned = {
// ...bookmarks,
// [networkName]: [didToAdd].concat(bookmarks[networkName])
// }
// setBookmarks(newPinned)
// }
function removeBookmark(didToAdd: string): void {
const newPinned = {
...bookmarks,
[networkName]: bookmarks[networkName].filter(
(did: string) => did !== didToAdd
)
}
setBookmarks(newPinned)
}
// function removeBookmark(didToAdd: string): void {
// const newPinned = {
// ...bookmarks,
// [networkName]: bookmarks[networkName].filter(
// (did: string) => did !== didToAdd
// )
// }
// setBookmarks(newPinned)
// }
// Bookmarks old data structure migration
useEffect(() => {
@ -109,9 +109,9 @@ function UserPreferencesProvider({
locale,
bookmarks,
setDebug,
setCurrency,
addBookmark,
removeBookmark
setCurrency
// addBookmark,
// removeBookmark
} as UserPreferencesValue
}
>

10
src/utils/ocean.ts
View File

@ -14,7 +14,7 @@ import { UserBalance } from '../@types/TokenBalance'
export function getOceanConfig(
network: ConfigHelperNetworkName | ConfigHelperNetworkId
): ConfigHelperConfig {
return new ConfigHelper().getConfig(
const config = new ConfigHelper().getConfig(
network,
network === 'polygon' ||
network === 137 ||
@ -22,7 +22,13 @@ export function getOceanConfig(
network === 1287
? undefined
: process.env.GATSBY_INFURA_PROJECT_ID
) as ConfigHelperConfig
)
return {
...config,
// TODO: remove faking one Aquarius for all networks
metadataCacheUri: 'https://aquarius.mainnet.oceanprotocol.com'
} as ConfigHelperConfig
}
export function getDevelopmentConfig(): Partial<ConfigHelperConfig> {