diff --git a/README.md b/README.md index 5e25431cd..ff4e7c067 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ - [Ocean Protocol Subgraph](#ocean-protocol-subgraph) - [3Box](#3box) - [Purgatory](#purgatory) + - [Network Metadata](#network-metadata) - [🎨 Storybook](#-storybook) - [✨ Code Style](#-code-style) - [👩‍🔬 Testing](#-testing) @@ -229,6 +230,8 @@ function Component() { Based on [list-purgatory](https://github.com/oceanprotocol/list-purgatory) some data sets get additional data. Within most components this can be done with the internal `useAsset()` hook which fetches data from the [market-purgatory](https://github.com/oceanprotocol/market-purgatory) endpoint in the background. +For asset purgatory: + ```tsx import { useAsset } from '../../../providers/Asset' @@ -238,6 +241,36 @@ function Component() { } ``` +For account purgatory: + +```tsx +import { useWeb3 } from '../../../providers/Web3' +import { useAccountPurgatory } from '../../../hooks/useAccountPurgatory' + +function Component() { + const { accountId } = useWeb3() + const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId) + return isInPurgatory ?
{purgatoryData.reason}
: null +} +``` + +### Network Metadata + +All displayed chain & network metadata is retrieved from `https://chainid.network` on build time and integrated into Gatsby's GraphQL layer. This data source is a community-maintained GitHub repository under [ethereum-lists/chains](https://github.com/ethereum-lists/chains). + +Within components this metadata can be queried for under `allNetworksMetadataJson`. The `useWeb3()` hook does this in the background to expose the final `networkDisplayName` for use in components: + +```tsx +export default function NetworkName(): ReactElement { + const { networkDisplayName, isTestnet } = useWeb3() + return ( + <> + {networkDisplayName} {isTestnet && `(Test)`} + + ) +} +``` + ## 🎨 Storybook > TODO: this is broken for most components. See https://github.com/oceanprotocol/market/issues/128 diff --git a/apollo.config.js b/apollo.config.js index 515f0579e..8c4500450 100644 --- a/apollo.config.js +++ b/apollo.config.js @@ -3,7 +3,7 @@ module.exports = { service: { name: 'ocean', url: - 'https://subgraph.mainnet.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph', + 'https://subgraph.rinkeby.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph', // optional disable SSL validation check skipSSLValidation: true } diff --git a/content/site.json b/content/site.json index 079f9e459..4f319282a 100644 --- a/content/site.json +++ b/content/site.json @@ -16,6 +16,8 @@ "link": "/history" } ], - "warning": "We are in beta. Please familiarize yourself with [the market](https://oceanprotocol.com/technology/marketplaces), [the risks](https://blog.oceanprotocol.com/on-staking-on-data-in-ocean-market-3d8e09eb0a13), and the [Terms of Use](/terms)." + "warning": "We are in beta. Please familiarize yourself with [the market](https://oceanprotocol.com/technology/marketplaces), [the risks](https://blog.oceanprotocol.com/on-staking-on-data-in-ocean-market-3d8e09eb0a13), and the [Terms of Use](/terms).", + "warningPolygon": "Polygon/Matic EVM support is in early stages. Use the Matic bridge to [get mOCEAN](https://docs.oceanprotocol.com/tutorials/polygon-bridge/).", + "warningPolygonPublish": "Only republish data sets with a pool from ETH Mainnet into Polygon/Matic if the liquidity is **less than or equal to 1000 OCEAN in the original pool**. Doing otherwise will lead to [purgatory](https://github.com/oceanprotocol/list-purgatory) for the data set in Polygon/Matic." } } diff --git a/gatsby-node.js b/gatsby-node.js index 28a888cc4..ffe90296b 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,4 +1,3 @@ -const path = require('path') const createFields = require('./gatsby/createFields') const createMarkdownPages = require('./gatsby/createMarkdownPages') const execSync = require('child_process').execSync @@ -48,14 +47,6 @@ exports.onCreateWebpackConfig = ({ actions }) => { fs: 'empty' }, // fix for 'got'/'swarm-js' dependency - externals: ['got'], - - // fix for being able to use `npm link` with @oceanprotocol/react - // see https://github.com/facebook/react/issues/13991 - resolve: { - alias: { - react: path.resolve('./node_modules/react') - } - } + externals: ['got'] }) } diff --git a/package-lock.json b/package-lock.json index 619edbd6d..fa9e8a170 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3643,18 +3643,6 @@ "web3-eth-contract": "^1.3.4" } }, - "@oceanprotocol/react": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.5.5.tgz", - "integrity": "sha512-2xkdiU7vsV+MbS4FD3xrUIud6oZ6ognuLg8zesV8yGND4WlyNR95g2bp3L93H0asg65VdYh5ZSyNzxPHKjzqhg==", - "requires": { - "@oceanprotocol/lib": "^0.11.4", - "axios": "^0.21.1", - "decimal.js": "^10.2.1", - "web3": "1.3.4", - "web3modal": "^1.9.3" - } - }, "@oceanprotocol/typographies": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/@oceanprotocol/typographies/-/typographies-0.1.0.tgz", diff --git a/package.json b/package.json index 011224823..ef7a74395 100644 --- a/package.json +++ b/package.json @@ -23,12 +23,11 @@ "postinstall": "husky install" }, "dependencies": { - "@apollo/client": "^3.3.6", + "@apollo/client": "^3.3.11", "@coingecko/cryptoformat": "^0.4.2", "@loadable/component": "^5.14.1", "@oceanprotocol/art": "^3.0.0", "@oceanprotocol/lib": "^0.11.4", - "@oceanprotocol/react": "^0.5.5", "@oceanprotocol/typographies": "^0.1.0", "@portis/web3": "^3.0.3", "@sindresorhus/slugify": "^1.0.0", @@ -87,7 +86,8 @@ "slugify": "^1.4.6", "swr": "^0.3.11", "use-dark-mode": "^2.3.1", - "web3": "^1.3.1", + "web3": "^1.3.4", + "web3modal": "^1.9.3", "yup": "^0.32.6" }, "devDependencies": { diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts index e52e26b16..7b8a85ab3 100644 --- a/src/@types/MetaData.d.ts +++ b/src/@types/MetaData.d.ts @@ -4,7 +4,8 @@ import { AdditionalInformation, ServiceMetadata } from '@oceanprotocol/lib' -import { DataTokenOptions, PriceOptions } from '@oceanprotocol/react' +import { DataTokenOptions } from '../hooks/usePublish' +import { PriceOptions } from '../hooks/usePricing' export interface AdditionalInformationMarket extends AdditionalInformation { links?: File[] diff --git a/src/@types/TokenBalance.d.ts b/src/@types/TokenBalance.d.ts index 1feb8c8df..279802adb 100644 --- a/src/@types/TokenBalance.d.ts +++ b/src/@types/TokenBalance.d.ts @@ -1,4 +1,9 @@ -export default interface TokenBalance { +export interface PoolBalance { ocean: number datatoken: number } + +export interface UserBalance { + eth: string + ocean: string +} diff --git a/src/components/App.tsx b/src/components/App.tsx index ecb98db9c..4ab47db40 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -4,9 +4,10 @@ import Header from './organisms/Header' import Styles from '../global/Styles' import styles from './App.module.css' import { useSiteMetadata } from '../hooks/useSiteMetadata' -import { useOcean } from '@oceanprotocol/react' import Alert from './atoms/Alert' import { graphql, PageProps, useStaticQuery } from 'gatsby' +import { useAccountPurgatory } from '../hooks/useAccountPurgatory' +import { useWeb3 } from '../providers/Web3' const contentQuery = graphql` query AppQuery { @@ -34,23 +35,25 @@ export default function App({ const data = useStaticQuery(contentQuery) const purgatory = data.purgatory.edges[0].node.childContentJson.account - const { warning } = useSiteMetadata() - const { - isInPurgatory: isAccountInPurgatory, - purgatoryData: accountPurgatory - } = useOcean() + const { warning, warningPolygon } = useSiteMetadata() + const { accountId } = useWeb3() + const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId) + const { networkId } = useWeb3() return (
{(props as PageProps).uri === '/' && ( - + )} - {isAccountInPurgatory && ( + {isInPurgatory && ( diff --git a/src/components/atoms/Dropzone.module.css b/src/components/atoms/Dropzone.module.css deleted file mode 100644 index 363a2530b..000000000 --- a/src/components/atoms/Dropzone.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.dropzone { - padding: var(--spacer); - text-align: center; - color: var(--color-secondary); - border: 0.1rem dashed var(--color-secondary); - font-size: var(--font-size-small); - border-radius: var(--border-radius); -} - -.dragover { - border-color: var(--color-primary); -} - -.disabled { -} - -.error { -} diff --git a/src/components/atoms/Dropzone.stories.tsx b/src/components/atoms/Dropzone.stories.tsx deleted file mode 100644 index 1399186bc..000000000 --- a/src/components/atoms/Dropzone.stories.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react' -import Dropzone from './Dropzone' - -export default { - title: 'Atoms/Dropzone' -} - -export const Default = () => null} /> diff --git a/src/components/atoms/Dropzone.tsx b/src/components/atoms/Dropzone.tsx deleted file mode 100644 index e88cba4a1..000000000 --- a/src/components/atoms/Dropzone.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React, { ReactElement, useCallback } from 'react' -import { useDropzone } from 'react-dropzone' -import styles from './Dropzone.module.css' -import { formatBytes } from '../../utils' - -export default function Dropzone({ - handleOnDrop, - disabled, - multiple, - error -}: { - handleOnDrop(files: File[]): void - disabled?: boolean - multiple?: boolean - error?: string -}): ReactElement { - const onDrop = useCallback((acceptedFiles) => handleOnDrop(acceptedFiles), [ - handleOnDrop - ]) - - const { - getRootProps, - getInputProps, - isDragActive, - isDragReject, - acceptedFiles - } = useDropzone({ onDrop }) - - const files = acceptedFiles.map((file: any) => ( -
  • - {file.path} - {formatBytes(file.size, 0)} -
    • - )) - - return ( -
    -
    - {acceptedFiles.length > 0 ? ( - - ) : ( - <> - - - {isDragActive && !isDragReject ? ( - `Drop it like it's hot!` - ) : multiple ? ( - `Drag 'n' drop some files here, or click to select files` - ) : error ? ( -
    {error}
    - ) : ( - `Drag 'n' drop a file here, or click to select a file` - )} - - )} -
    -
    - ) -} diff --git a/src/components/atoms/EtherscanLink.tsx b/src/components/atoms/EtherscanLink.tsx deleted file mode 100644 index 2a8acca93..000000000 --- a/src/components/atoms/EtherscanLink.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React, { ReactElement, ReactNode, useEffect, useState } from 'react' -import { EthereumListsChain, getNetworkData } from '../../utils/wallet' -import { ReactComponent as External } from '../../images/external.svg' -import styles from './EtherscanLink.module.css' -import { useSiteMetadata } from '../../hooks/useSiteMetadata' -import { graphql, useStaticQuery } from 'gatsby' - -const networksQuery = graphql` - query { - allNetworksMetadataJson { - edges { - node { - chain - network - networkId - } - } - } - } -` - -export default function EtherscanLink({ - networkId, - path, - children -}: { - networkId: number - path: string - children: ReactNode -}): ReactElement { - const data = useStaticQuery(networksQuery) - const networksList: { node: EthereumListsChain }[] = - data.allNetworksMetadataJson.edges - - const { appConfig } = useSiteMetadata() - const [url, setUrl] = useState() - - useEffect(() => { - const networkData = networkId - ? getNetworkData(networksList, networkId) - : null - const url = - (!networkId && appConfig.network === 'mainnet') || networkId === 1 - ? `https://etherscan.io` - : `https://${ - networkData ? networkData.network : appConfig.network - }.etherscan.io` - - setUrl(url) - }, [networkId, networksList, appConfig.network]) - - return ( - - {children} - - ) -} diff --git a/src/components/atoms/EtherscanLink.module.css b/src/components/atoms/ExplorerLink.module.css similarity index 100% rename from src/components/atoms/EtherscanLink.module.css rename to src/components/atoms/ExplorerLink.module.css diff --git a/src/components/atoms/ExplorerLink.tsx b/src/components/atoms/ExplorerLink.tsx new file mode 100644 index 000000000..5a84964c5 --- /dev/null +++ b/src/components/atoms/ExplorerLink.tsx @@ -0,0 +1,33 @@ +import React, { ReactElement, ReactNode, useEffect, useState } from 'react' +import { ReactComponent as External } from '../../images/external.svg' +import styles from './ExplorerLink.module.css' +import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper' +import { useOcean } from '../../providers/Ocean' + +export default function ExplorerLink({ + path, + children +}: { + networkId: number + path: string + children: ReactNode +}): ReactElement { + const { config } = useOcean() + const [url, setUrl] = useState() + + useEffect(() => { + setUrl((config as ConfigHelperConfig).explorerUri) + }, [config]) + + return ( + + {children} + + ) +} diff --git a/src/components/atoms/Markdown.tsx b/src/components/atoms/Markdown.tsx index 39004d98e..f4f96ae1f 100644 --- a/src/components/atoms/Markdown.tsx +++ b/src/components/atoms/Markdown.tsx @@ -12,7 +12,6 @@ const Markdown = ({ // fix react-markdown \n transformation // https://github.com/rexxars/react-markdown/issues/105#issuecomment-351585313 const textCleaned = text.replace(/\\n/g, '\n ') - return ( +export const Normal = () => -export const Small = () => +export const Small = () => diff --git a/src/components/atoms/Price/index.tsx b/src/components/atoms/Price/index.tsx index 324620d1e..96f2c2238 100644 --- a/src/components/atoms/Price/index.tsx +++ b/src/components/atoms/Price/index.tsx @@ -1,25 +1,21 @@ import React, { ReactElement } from 'react' import styles from './index.module.css' -import { useMetadata } from '@oceanprotocol/react' -import { DDO } from '@oceanprotocol/lib' +import { BestPrice } from '@oceanprotocol/lib' import Loader from '../Loader' import Tooltip from '../Tooltip' import PriceUnit from './PriceUnit' export default function Price({ - ddo, + price, className, small, conversion }: { - ddo: DDO + price: BestPrice className?: string small?: boolean conversion?: boolean }): ReactElement { - // price is not fetched from the chain anymore , will update one AssetProvider is implemented - const { price } = useMetadata(ddo) - return price?.value ? ( - + {account} - +
    {profile?.description && ( diff --git a/src/components/atoms/Publisher/index.tsx b/src/components/atoms/Publisher/index.tsx index a8c89a0f8..086bbca17 100644 --- a/src/components/atoms/Publisher/index.tsx +++ b/src/components/atoms/Publisher/index.tsx @@ -5,13 +5,13 @@ import Tooltip from '../Tooltip' import { Profile } from '../../../models/Profile' import { Link } from 'gatsby' import get3BoxProfile from '../../../utils/profile' -import EtherscanLink from '../EtherscanLink' -import { accountTruncate } from '../../../utils/wallet' +import ExplorerLink from '../ExplorerLink' +import { accountTruncate } from '../../../utils/web3' import axios from 'axios' -import { useOcean } from '@oceanprotocol/react' import { ReactComponent as Info } from '../../../images/info.svg' import ProfileDetails from './ProfileDetails' import Add from './Add' +import { useWeb3 } from '../../../providers/Web3' const cx = classNames.bind(styles) @@ -24,7 +24,7 @@ export default function Publisher({ minimal?: boolean className?: string }): ReactElement { - const { networkId, accountId } = useOcean() + const { networkId, accountId } = useWeb3() const [profile, setProfile] = useState() const [name, setName] = useState() @@ -88,9 +88,9 @@ export default function Publisher({ )} {showAdd && } - - Etherscan - + + Explorer +
    )} diff --git a/src/components/atoms/Seo.tsx b/src/components/atoms/Seo.tsx index 07a0dafe4..5002c597a 100644 --- a/src/components/atoms/Seo.tsx +++ b/src/components/atoms/Seo.tsx @@ -1,6 +1,7 @@ import React, { ReactElement } from 'react' import { Helmet } from 'react-helmet' import { useSiteMetadata } from '../../hooks/useSiteMetadata' +import { isBrowser } from '../../utils' export default function Seo({ title, @@ -24,7 +25,7 @@ export default function Seo({ > - {typeof window !== 'undefined' && + {isBrowser && window.location && window.location.hostname !== 'oceanprotocol.com' && ( diff --git a/src/components/molecules/AssetListTitle.tsx b/src/components/molecules/AssetListTitle.tsx index 15f5cdc9a..c62bd62f4 100644 --- a/src/components/molecules/AssetListTitle.tsx +++ b/src/components/molecules/AssetListTitle.tsx @@ -1,8 +1,8 @@ import { DDO } from '@oceanprotocol/lib' -import { useOcean } from '@oceanprotocol/react' +import { useOcean } from '../../providers/Ocean' import { Link } from 'gatsby' import React, { ReactElement, useEffect, useState } from 'react' -import { retrieveDDO, getAssetsNames } from '../../utils/aquarius' +import { getAssetsNames } from '../../utils/aquarius' import styles from './AssetListTitle.module.css' import axios from 'axios' diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index 68b5eb6db..10f6b0336 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -7,7 +7,6 @@ import { DDO } from '@oceanprotocol/lib' import removeMarkdown from 'remove-markdown' import Tooltip from '../atoms/Tooltip' import Publisher from '../atoms/Publisher' -import { useMetadata } from '@oceanprotocol/react' import Time from '../atoms/Time' declare type AssetTeaserProps = { @@ -15,11 +14,11 @@ declare type AssetTeaserProps = { } const AssetTeaser: React.FC = ({ ddo }: AssetTeaserProps) => { - const { owner } = useMetadata(ddo) const { attributes } = ddo.findServiceByType('metadata') const { name } = attributes.main const { dataTokenInfo } = ddo const isCompute = Boolean(ddo.findServiceByType('compute')) + const { owner } = ddo.publicKey[0] return (
    @@ -48,7 +47,7 @@ const AssetTeaser: React.FC = ({ ddo }: AssetTeaserProps) => {