mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
restructure form, dial back on overwriting native Formik functionality
This commit is contained in:
parent
99453623d2
commit
f2b1a33261
@ -15,21 +15,6 @@
|
|||||||
"type": "textarea",
|
"type": "textarea",
|
||||||
"required": true
|
"required": true
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "files",
|
|
||||||
"label": "File",
|
|
||||||
"placeholder": "e.g. https://file.com/file.json",
|
|
||||||
"help": "Please enter the URL to your data set file and click \"ADD FILE\" to validate the data. This URL will be stored encrypted after publishing. For a compute data set, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size.",
|
|
||||||
"type": "files",
|
|
||||||
"required": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "links",
|
|
||||||
"label": "Sample file",
|
|
||||||
"placeholder": "e.g. https://file.com/samplefile.json",
|
|
||||||
"help": "Please enter the URL to a sample of your data set file and click \"ADD FILE\" to validate the data. This file should reveal the data structure of your data set, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing.",
|
|
||||||
"type": "files"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "author",
|
"name": "author",
|
||||||
"label": "Author",
|
"label": "Author",
|
||||||
@ -55,6 +40,28 @@
|
|||||||
"services": {
|
"services": {
|
||||||
"title": "Create services",
|
"title": "Create services",
|
||||||
"fields": [
|
"fields": [
|
||||||
|
{
|
||||||
|
"name": "dataTokenOptions",
|
||||||
|
"label": "Datatoken Name & Symbol",
|
||||||
|
"type": "datatoken",
|
||||||
|
"help": "The datatoken for this data set will be created with this name & symbol.",
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "files",
|
||||||
|
"label": "File",
|
||||||
|
"placeholder": "e.g. https://file.com/file.json",
|
||||||
|
"help": "Please enter the URL to your data set file and click \"ADD FILE\" to validate the data. This URL will be stored encrypted after publishing. For a compute data set, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size.",
|
||||||
|
"type": "files",
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "links",
|
||||||
|
"label": "Sample file",
|
||||||
|
"placeholder": "e.g. https://file.com/samplefile.json",
|
||||||
|
"help": "Please enter the URL to a sample of your data set file and click \"ADD FILE\" to validate the data. This file should reveal the data structure of your data set, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing.",
|
||||||
|
"type": "files"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "access",
|
"name": "access",
|
||||||
"label": "Access Type",
|
"label": "Access Type",
|
||||||
@ -65,14 +72,6 @@
|
|||||||
"disclaimer": "Please do not provide downloadable personal data without the consent of the data subjects.",
|
"disclaimer": "Please do not provide downloadable personal data without the consent of the data subjects.",
|
||||||
"disclaimerValues": ["Download"]
|
"disclaimerValues": ["Download"]
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "providerUri",
|
|
||||||
"label": "Custom Provider URL",
|
|
||||||
"type": "providerUri",
|
|
||||||
"help": "Enter the URL for your custom provider or leave blank to use the default provider. [Learn more](https://github.com/oceanprotocol/provider/).",
|
|
||||||
"placeholder": "https://provider.polygon.oceanprotocol.com/",
|
|
||||||
"advanced": true
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "timeout",
|
"name": "timeout",
|
||||||
"label": "Timeout",
|
"label": "Timeout",
|
||||||
@ -82,17 +81,23 @@
|
|||||||
"sortOptions": false,
|
"sortOptions": false,
|
||||||
"required": true
|
"required": true
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"name": "dataTokenOptions",
|
"name": "providerUri",
|
||||||
"label": "Datatoken Name & Symbol",
|
"label": "Custom Provider URL",
|
||||||
"type": "datatoken",
|
"type": "providerUri",
|
||||||
"help": "The datatoken for this data set will be created with this name & symbol.",
|
"help": "Enter the URL for your custom provider or leave blank to use the default provider. [Learn more](https://github.com/oceanprotocol/provider/).",
|
||||||
"required": true
|
"placeholder": "https://provider.polygon.oceanprotocol.com/",
|
||||||
|
"advanced": true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"pricing": {
|
"pricing": {
|
||||||
"title": "Create pricing schema",
|
"title": "Create pricing schema",
|
||||||
"fields": [{ "name": "dummy content" }]
|
"fields": [
|
||||||
|
{
|
||||||
|
"name": "dummy content, as content is defined under 'create' key in ../price.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -7,11 +7,7 @@ import React, {
|
|||||||
useEffect
|
useEffect
|
||||||
} from 'react'
|
} from 'react'
|
||||||
import { Logger, LogLevel } from '@oceanprotocol/lib'
|
import { Logger, LogLevel } from '@oceanprotocol/lib'
|
||||||
<<<<<<< HEAD:src/@context/UserPreferences.tsx
|
|
||||||
import { isBrowser } from '@utils/index'
|
import { isBrowser } from '@utils/index'
|
||||||
=======
|
|
||||||
import { isBrowser } from '../utils'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/context/UserPreferences.tsx
|
|
||||||
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
||||||
|
|
||||||
interface UserPreferencesValue {
|
interface UserPreferencesValue {
|
||||||
|
@ -1,35 +1,8 @@
|
|||||||
import { useStaticQuery, graphql } from 'gatsby'
|
|
||||||
import { UseNetworkMetadata } from './types'
|
import { UseNetworkMetadata } from './types'
|
||||||
|
import networkdata from '../../../content/networks-metadata.json'
|
||||||
const networksQuery = graphql`
|
|
||||||
query {
|
|
||||||
allNetworksMetadataJson {
|
|
||||||
edges {
|
|
||||||
node {
|
|
||||||
chain
|
|
||||||
network
|
|
||||||
networkId
|
|
||||||
chainId
|
|
||||||
rpc
|
|
||||||
explorers {
|
|
||||||
url
|
|
||||||
}
|
|
||||||
nativeCurrency {
|
|
||||||
name
|
|
||||||
symbol
|
|
||||||
decimals
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
export default function useNetworkMetadata(): UseNetworkMetadata {
|
export default function useNetworkMetadata(): UseNetworkMetadata {
|
||||||
const data = useStaticQuery(networksQuery)
|
const networksList: EthereumListsChain[] = networkdata
|
||||||
const networksList: { node: EthereumListsChain }[] =
|
|
||||||
data.allNetworksMetadataJson.edges
|
|
||||||
|
|
||||||
return { networksList }
|
return { networksList }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2,13 +2,8 @@ import React, { ReactElement } from 'react'
|
|||||||
import classNames from 'classnames/bind'
|
import classNames from 'classnames/bind'
|
||||||
import { addTokenToWallet } from '@utils/web3'
|
import { addTokenToWallet } from '@utils/web3'
|
||||||
import { useWeb3 } from '@context/Web3'
|
import { useWeb3 } from '@context/Web3'
|
||||||
<<<<<<< HEAD:src/components/@shared/AddToken/index.tsx
|
|
||||||
import Button from '@shared/atoms/Button'
|
import Button from '@shared/atoms/Button'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
=======
|
|
||||||
import Button from './Button'
|
|
||||||
import styles from './AddToken.module.css'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/AddToken.tsx
|
|
||||||
|
|
||||||
const cx = classNames.bind(styles)
|
const cx = classNames.bind(styles)
|
||||||
|
|
||||||
|
@ -1,14 +1,8 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import classNames from 'classnames/bind'
|
import classNames from 'classnames/bind'
|
||||||
<<<<<<< HEAD:src/components/@shared/AnnouncementBanner/index.tsx
|
|
||||||
import Markdown from '@shared/Markdown'
|
import Markdown from '@shared/Markdown'
|
||||||
import Button from '@shared/atoms/Button'
|
import Button from '@shared/atoms/Button'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
=======
|
|
||||||
import Markdown from './Markdown'
|
|
||||||
import Button from './Button'
|
|
||||||
import styles from './AnnouncementBanner.module.css'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/AnnouncementBanner.tsx
|
|
||||||
|
|
||||||
const cx = classNames.bind(styles)
|
const cx = classNames.bind(styles)
|
||||||
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import Dotdotdot from 'react-dotdotdot'
|
import Dotdotdot from 'react-dotdotdot'
|
||||||
import { Link } from 'gatsby'
|
import Link from 'next/link'
|
||||||
import PriceUnit from '@shared/atoms/Price/PriceUnit'
|
import PriceUnit from '@shared/Price/PriceUnit'
|
||||||
import Loader from '@shared/atoms/Loader'
|
import Loader from '@shared/atoms/Loader'
|
||||||
import styles from './AssetComputeList.module.css'
|
import styles from './AssetComputeList.module.css'
|
||||||
import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
|
import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
|
||||||
@ -24,22 +24,20 @@ export default function AssetComputeSelection({
|
|||||||
<Empty />
|
<Empty />
|
||||||
) : (
|
) : (
|
||||||
assets.map((asset: AssetSelectionAsset) => (
|
assets.map((asset: AssetSelectionAsset) => (
|
||||||
<Link
|
<Link href={`/asset/${asset.did}`} key={asset.did}>
|
||||||
to={`/asset/${asset.did}`}
|
<a className={styles.row}>
|
||||||
className={styles.row}
|
<div className={styles.info}>
|
||||||
key={asset.did}
|
<h3 className={styles.title}>
|
||||||
>
|
<Dotdotdot clamp={1} tagName="span">
|
||||||
<div className={styles.info}>
|
{asset.name}
|
||||||
<h3 className={styles.title}>
|
</Dotdotdot>
|
||||||
<Dotdotdot clamp={1} tagName="span">
|
</h3>
|
||||||
{asset.name}
|
<Dotdotdot clamp={1} tagName="code" className={styles.did}>
|
||||||
|
{asset.symbol} | {asset.did}
|
||||||
</Dotdotdot>
|
</Dotdotdot>
|
||||||
</h3>
|
</div>
|
||||||
<Dotdotdot clamp={1} tagName="code" className={styles.did}>
|
<PriceUnit price={asset.price} small className={styles.price} />
|
||||||
{asset.symbol} | {asset.did}
|
</a>
|
||||||
</Dotdotdot>
|
|
||||||
</div>
|
|
||||||
<PriceUnit price={asset.price} small className={styles.price} />
|
|
||||||
</Link>
|
</Link>
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { Link } from 'gatsby'
|
import Link from 'next/link'
|
||||||
import Dotdotdot from 'react-dotdotdot'
|
import Dotdotdot from 'react-dotdotdot'
|
||||||
import Price from '../atoms/Price'
|
import Price from '@shared/Price'
|
||||||
import { DDO } from '@oceanprotocol/lib'
|
import { DDO } from '@oceanprotocol/lib'
|
||||||
import removeMarkdown from 'remove-markdown'
|
import removeMarkdown from 'remove-markdown'
|
||||||
import Publisher from '../atoms/Publisher'
|
import Publisher from '@shared/Publisher'
|
||||||
import AssetType from '../atoms/AssetType'
|
import AssetType from '@shared/AssetType'
|
||||||
import NetworkName from '../atoms/NetworkName'
|
import NetworkName from '@shared/NetworkName'
|
||||||
import styles from './AssetTeaser.module.css'
|
import styles from './AssetTeaser.module.css'
|
||||||
|
|
||||||
declare type AssetTeaserProps = {
|
declare type AssetTeaserProps = {
|
||||||
@ -29,38 +29,40 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<article className={`${styles.teaser} ${styles[type]}`}>
|
<article className={`${styles.teaser} ${styles[type]}`}>
|
||||||
<Link to={`/asset/${ddo.id}`} className={styles.link}>
|
<Link href={`/asset/${ddo.id}`}>
|
||||||
<header className={styles.header}>
|
<a className={styles.link}>
|
||||||
<div className={styles.symbol}>{dataTokenInfo?.symbol}</div>
|
<header className={styles.header}>
|
||||||
<Dotdotdot clamp={3}>
|
<div className={styles.symbol}>{dataTokenInfo?.symbol}</div>
|
||||||
<h1 className={styles.title}>{name}</h1>
|
<Dotdotdot clamp={3}>
|
||||||
</Dotdotdot>
|
<h1 className={styles.title}>{name}</h1>
|
||||||
{!noPublisher && (
|
</Dotdotdot>
|
||||||
<Publisher account={owner} minimal className={styles.publisher} />
|
{!noPublisher && (
|
||||||
)}
|
<Publisher account={owner} minimal className={styles.publisher} />
|
||||||
</header>
|
|
||||||
|
|
||||||
<AssetType
|
|
||||||
type={type}
|
|
||||||
accessType={accessType}
|
|
||||||
className={styles.typeDetails}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className={styles.content}>
|
|
||||||
<Dotdotdot tagName="p" clamp={3}>
|
|
||||||
{removeMarkdown(
|
|
||||||
attributes?.additionalInformation?.description?.substring(
|
|
||||||
0,
|
|
||||||
300
|
|
||||||
) || ''
|
|
||||||
)}
|
)}
|
||||||
</Dotdotdot>
|
</header>
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer className={styles.foot}>
|
<AssetType
|
||||||
<Price price={price} small />
|
type={type}
|
||||||
<NetworkName networkId={ddo.chainId} className={styles.network} />
|
accessType={accessType}
|
||||||
</footer>
|
className={styles.typeDetails}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className={styles.content}>
|
||||||
|
<Dotdotdot tagName="p" clamp={3}>
|
||||||
|
{removeMarkdown(
|
||||||
|
attributes?.additionalInformation?.description?.substring(
|
||||||
|
0,
|
||||||
|
300
|
||||||
|
) || ''
|
||||||
|
)}
|
||||||
|
</Dotdotdot>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer className={styles.foot}>
|
||||||
|
<Price price={price} small />
|
||||||
|
<NetworkName networkId={ddo.chainId} className={styles.network} />
|
||||||
|
</footer>
|
||||||
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
</article>
|
</article>
|
||||||
)
|
)
|
||||||
|
@ -1,15 +1,9 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import classNames from 'classnames/bind'
|
import classNames from 'classnames/bind'
|
||||||
<<<<<<< HEAD:src/components/@shared/AssetType/index.tsx
|
|
||||||
import Compute from '@images/compute.svg'
|
import Compute from '@images/compute.svg'
|
||||||
import Download from '@images/download.svg'
|
import Download from '@images/download.svg'
|
||||||
import Lock from '@images/lock.svg'
|
import Lock from '@images/lock.svg'
|
||||||
=======
|
|
||||||
import { ReactComponent as Compute } from '@images/compute.svg'
|
|
||||||
import { ReactComponent as Download } from '@images/download.svg'
|
|
||||||
import { ReactComponent as Lock } from '@images/lock.svg'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/AssetType.tsx
|
|
||||||
|
|
||||||
const cx = classNames.bind(styles)
|
const cx = classNames.bind(styles)
|
||||||
|
|
||||||
|
@ -1,17 +1,9 @@
|
|||||||
import React, { ReactElement, ReactNode, useEffect, useState } from 'react'
|
import React, { ReactElement, ReactNode, useEffect, useState } from 'react'
|
||||||
<<<<<<< HEAD:src/components/@shared/ExplorerLink/index.tsx
|
|
||||||
import External from '@images/external.svg'
|
import External from '@images/external.svg'
|
||||||
import classNames from 'classnames/bind'
|
import classNames from 'classnames/bind'
|
||||||
import { ConfigHelperConfig } from '@oceanprotocol/lib'
|
import { ConfigHelperConfig } from '@oceanprotocol/lib'
|
||||||
import { useOcean } from '@context/Ocean'
|
import { useOcean } from '@context/Ocean'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
=======
|
|
||||||
import { ReactComponent as External } from '@images/external.svg'
|
|
||||||
import classNames from 'classnames/bind'
|
|
||||||
import { ConfigHelperConfig } from '@oceanprotocol/lib'
|
|
||||||
import { useOcean } from '@context/Ocean'
|
|
||||||
import styles from './ExplorerLink.module.css'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/ExplorerLink.tsx
|
|
||||||
import { getOceanConfig } from '@utils/ocean'
|
import { getOceanConfig } from '@utils/ocean'
|
||||||
|
|
||||||
const cx = classNames.bind(styles)
|
const cx = classNames.bind(styles)
|
||||||
|
@ -3,13 +3,8 @@ import { File as FileMetadata } from '@oceanprotocol/lib'
|
|||||||
import filesize from 'filesize'
|
import filesize from 'filesize'
|
||||||
import classNames from 'classnames/bind'
|
import classNames from 'classnames/bind'
|
||||||
import cleanupContentType from '@utils/cleanupContentType'
|
import cleanupContentType from '@utils/cleanupContentType'
|
||||||
<<<<<<< HEAD:src/components/@shared/FileIcon/index.tsx
|
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import Loader from '@shared/atoms/Loader'
|
import Loader from '@shared/atoms/Loader'
|
||||||
=======
|
|
||||||
import styles from './File.module.css'
|
|
||||||
import Loader from './Loader'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/File.tsx
|
|
||||||
|
|
||||||
const cx = classNames.bind(styles)
|
const cx = classNames.bind(styles)
|
||||||
|
|
||||||
|
@ -29,7 +29,7 @@ export default function AdvancedSettings(prop: {
|
|||||||
Advanced Settings
|
Advanced Settings
|
||||||
</Button>
|
</Button>
|
||||||
{showAdvancedSettings &&
|
{showAdvancedSettings &&
|
||||||
prop.content.data.map(
|
prop.content.fields.map(
|
||||||
(field: FormFieldProps) =>
|
(field: FormFieldProps) =>
|
||||||
field.advanced === true && (
|
field.advanced === true && (
|
||||||
<Field
|
<Field
|
||||||
|
@ -2,29 +2,15 @@ import React, { ReactElement } from 'react'
|
|||||||
import { InputProps } from '@shared/Form/Input'
|
import { InputProps } from '@shared/Form/Input'
|
||||||
import InputElement from '@shared/Form/Input/InputElement'
|
import InputElement from '@shared/Form/Input/InputElement'
|
||||||
import styles from './Terms.module.css'
|
import styles from './Terms.module.css'
|
||||||
import { graphql, useStaticQuery } from 'gatsby'
|
|
||||||
|
|
||||||
const query = graphql`
|
|
||||||
query TermsQuery {
|
|
||||||
terms: markdownRemark(fields: { slug: { eq: "/terms" } }) {
|
|
||||||
html
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
export default function Terms(props: InputProps): ReactElement {
|
export default function Terms(props: InputProps): ReactElement {
|
||||||
const data = useStaticQuery(query)
|
|
||||||
const termsProps: InputProps = {
|
const termsProps: InputProps = {
|
||||||
...props,
|
...props,
|
||||||
defaultChecked: props?.value?.toString() === 'true'
|
defaultChecked: props.value.toString() === 'true'
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div
|
|
||||||
className={styles.terms}
|
|
||||||
dangerouslySetInnerHTML={{ __html: data.terms.html }}
|
|
||||||
/>
|
|
||||||
<InputElement {...termsProps} type="checkbox" />
|
<InputElement {...termsProps} type="checkbox" />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
@ -7,14 +7,13 @@ import React, {
|
|||||||
useState
|
useState
|
||||||
} from 'react'
|
} from 'react'
|
||||||
import InputElement from './InputElement'
|
import InputElement from './InputElement'
|
||||||
import Help from './Help'
|
|
||||||
import Label from './Label'
|
import Label from './Label'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import { ErrorMessage, FieldInputProps } from 'formik'
|
import { ErrorMessage, FieldInputProps } from 'formik'
|
||||||
import classNames from 'classnames/bind'
|
import classNames from 'classnames/bind'
|
||||||
import Disclaimer from './Disclaimer'
|
import Disclaimer from './Disclaimer'
|
||||||
import Tooltip from '@shared/atoms/Tooltip'
|
import Tooltip from '@shared/atoms/Tooltip'
|
||||||
import Markdown from '@shared/atoms/Markdown'
|
import Markdown from '@shared/Markdown'
|
||||||
|
|
||||||
const cx = classNames.bind(styles)
|
const cx = classNames.bind(styles)
|
||||||
|
|
||||||
|
@ -26,7 +26,7 @@ export default function Page({
|
|||||||
<Container>
|
<Container>
|
||||||
{title && !noPageHeader && (
|
{title && !noPageHeader && (
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title={title}
|
title={<>{title}</>}
|
||||||
description={description}
|
description={description}
|
||||||
center={headerCenter}
|
center={headerCenter}
|
||||||
/>
|
/>
|
||||||
|
@ -1,23 +1,9 @@
|
|||||||
import React, { useState, useEffect, ReactElement } from 'react'
|
import React, { useState, useEffect, ReactElement } from 'react'
|
||||||
import ReactPaginate from 'react-paginate'
|
import ReactPaginate from 'react-paginate'
|
||||||
<<<<<<< HEAD:src/components/@shared/Pagination/index.tsx
|
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import { MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS } from '@utils/aquarius'
|
import { MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS } from '@utils/aquarius'
|
||||||
import Arrow from '@images/arrow.svg'
|
import Arrow from '@images/arrow.svg'
|
||||||
import { PaginationProps } from './_types'
|
import { PaginationProps } from './_types'
|
||||||
=======
|
|
||||||
import styles from './Pagination.module.css'
|
|
||||||
import { MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS } from '@utils/aquarius'
|
|
||||||
import { ReactComponent as Arrow } from '@images/arrow.svg'
|
|
||||||
|
|
||||||
interface PaginationProps {
|
|
||||||
totalPages?: number
|
|
||||||
currentPage?: number
|
|
||||||
onChangePage?(selected: number): void
|
|
||||||
rowsPerPage?: number
|
|
||||||
rowCount?: number
|
|
||||||
}
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/Pagination.tsx
|
|
||||||
|
|
||||||
export default function Pagination({
|
export default function Pagination({
|
||||||
totalPages,
|
totalPages,
|
||||||
|
@ -4,11 +4,7 @@ import classNames from 'classnames/bind'
|
|||||||
import Conversion from './Conversion'
|
import Conversion from './Conversion'
|
||||||
import styles from './PriceUnit.module.css'
|
import styles from './PriceUnit.module.css'
|
||||||
import { useUserPreferences } from '@context/UserPreferences'
|
import { useUserPreferences } from '@context/UserPreferences'
|
||||||
<<<<<<< HEAD:src/components/@shared/Price/PriceUnit.tsx
|
|
||||||
import Badge from '@shared/atoms/Badge'
|
import Badge from '@shared/atoms/Badge'
|
||||||
=======
|
|
||||||
import Badge from '../Badge'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/Price/PriceUnit.tsx
|
|
||||||
|
|
||||||
const cx = classNames.bind(styles)
|
const cx = classNames.bind(styles)
|
||||||
|
|
||||||
|
@ -1,9 +1,5 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
<<<<<<< HEAD:src/components/@shared/Publisher/Add.tsx
|
|
||||||
import External from '@images/external.svg'
|
import External from '@images/external.svg'
|
||||||
=======
|
|
||||||
import { ReactComponent as External } from '@images/external.svg'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/Publisher/Add.tsx
|
|
||||||
import styles from './Add.module.css'
|
import styles from './Add.module.css'
|
||||||
|
|
||||||
export default function Add(): ReactElement {
|
export default function Add(): ReactElement {
|
||||||
|
@ -1,21 +1,14 @@
|
|||||||
import React, { ReactElement, useEffect, useState } from 'react'
|
import React, { ReactElement, useEffect, useState } from 'react'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import classNames from 'classnames/bind'
|
import classNames from 'classnames/bind'
|
||||||
<<<<<<< HEAD:src/components/@shared/Publisher/index.tsx
|
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
=======
|
|
||||||
import { Link } from 'gatsby'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/Publisher/index.tsx
|
|
||||||
import get3BoxProfile from '@utils/profile'
|
import get3BoxProfile from '@utils/profile'
|
||||||
import { accountTruncate } from '@utils/web3'
|
import { accountTruncate } from '@utils/web3'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import Add from './Add'
|
import Add from './Add'
|
||||||
import { useWeb3 } from '@context/Web3'
|
import { useWeb3 } from '@context/Web3'
|
||||||
import { getEnsName } from '@utils/ens'
|
import { getEnsName } from '@utils/ens'
|
||||||
<<<<<<< HEAD:src/components/@shared/Publisher/index.tsx
|
|
||||||
import { useIsMounted } from '@hooks/useIsMounted'
|
import { useIsMounted } from '@hooks/useIsMounted'
|
||||||
=======
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/Publisher/index.tsx
|
|
||||||
|
|
||||||
const cx = classNames.bind(styles)
|
const cx = classNames.bind(styles)
|
||||||
|
|
||||||
|
@ -2,11 +2,7 @@ import React, { ReactElement } from 'react'
|
|||||||
import Tooltip from '@shared/atoms/Tooltip'
|
import Tooltip from '@shared/atoms/Tooltip'
|
||||||
import Status from '@shared/atoms/Status'
|
import Status from '@shared/atoms/Status'
|
||||||
import { useGraphSyncStatus } from '@hooks/useGraphSyncStatus'
|
import { useGraphSyncStatus } from '@hooks/useGraphSyncStatus'
|
||||||
<<<<<<< HEAD:src/components/@shared/SyncStatus/index.tsx
|
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
=======
|
|
||||||
import styles from './SyncStatus.module.css'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/SyncStatus.tsx
|
|
||||||
|
|
||||||
export default function SyncStatus(): ReactElement {
|
export default function SyncStatus(): ReactElement {
|
||||||
const { isGraphSynced, blockGraph, blockHead } = useGraphSyncStatus()
|
const { isGraphSynced, blockGraph, blockHead } = useGraphSyncStatus()
|
||||||
|
@ -1,79 +1,10 @@
|
|||||||
import React, { ReactElement, useCallback, useEffect, useState } from 'react'
|
import React, { ReactElement, useCallback, useEffect, useState } from 'react'
|
||||||
<<<<<<< HEAD:src/components/@shared/TokenApproval/index.tsx
|
|
||||||
import { useOcean } from '@context/Ocean'
|
import { useOcean } from '@context/Ocean'
|
||||||
import { useAsset } from '@context/Asset'
|
import { useAsset } from '@context/Asset'
|
||||||
import { useWeb3 } from '@context/Web3'
|
import { useWeb3 } from '@context/Web3'
|
||||||
import Decimal from 'decimal.js'
|
import Decimal from 'decimal.js'
|
||||||
import { getOceanConfig } from '@utils/ocean'
|
import { getOceanConfig } from '@utils/ocean'
|
||||||
import { ButtonApprove } from './ButtonApprove'
|
import { ButtonApprove } from './ButtonApprove'
|
||||||
=======
|
|
||||||
import Button from '@shared/atoms/Button'
|
|
||||||
import { useOcean } from '@context/Ocean'
|
|
||||||
import { useAsset } from '@context/Asset'
|
|
||||||
import Loader from '@shared/atoms/Loader'
|
|
||||||
import { useWeb3 } from '@context/Web3'
|
|
||||||
import { useUserPreferences } from '@context/UserPreferences'
|
|
||||||
import Tooltip from '@shared/atoms/Tooltip'
|
|
||||||
import { graphql, useStaticQuery } from 'gatsby'
|
|
||||||
import Decimal from 'decimal.js'
|
|
||||||
import { getOceanConfig } from '@utils/ocean'
|
|
||||||
|
|
||||||
const query = graphql`
|
|
||||||
query {
|
|
||||||
content: allFile(filter: { relativePath: { eq: "price.json" } }) {
|
|
||||||
edges {
|
|
||||||
node {
|
|
||||||
childContentJson {
|
|
||||||
pool {
|
|
||||||
tooltips {
|
|
||||||
approveSpecific
|
|
||||||
approveInfinite
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
function ButtonApprove({
|
|
||||||
amount,
|
|
||||||
coin,
|
|
||||||
approveTokens,
|
|
||||||
isLoading
|
|
||||||
}: {
|
|
||||||
amount: string
|
|
||||||
coin: string
|
|
||||||
approveTokens: (amount: string) => void
|
|
||||||
isLoading: boolean
|
|
||||||
}) {
|
|
||||||
// Get content
|
|
||||||
const data = useStaticQuery(query)
|
|
||||||
const content = data.content.edges[0].node.childContentJson.pool.tooltips
|
|
||||||
|
|
||||||
const { infiniteApproval } = useUserPreferences()
|
|
||||||
|
|
||||||
return isLoading ? (
|
|
||||||
<Loader message={`Approving ${coin}...`} />
|
|
||||||
) : infiniteApproval ? (
|
|
||||||
<Button
|
|
||||||
style="primary"
|
|
||||||
size="small"
|
|
||||||
disabled={parseInt(amount) < 1}
|
|
||||||
onClick={() => approveTokens(`${2 ** 53 - 1}`)}
|
|
||||||
>
|
|
||||||
Approve {coin}{' '}
|
|
||||||
<Tooltip content={content.approveInfinite.replace('COIN', coin)} />
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Button style="primary" size="small" onClick={() => approveTokens(amount)}>
|
|
||||||
Approve {amount} {coin}
|
|
||||||
<Tooltip content={content.approveSpecific.replace('COIN', coin)} />
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/TokenApproval.tsx
|
|
||||||
|
|
||||||
export default function TokenApproval({
|
export default function TokenApproval({
|
||||||
actionButton,
|
actionButton,
|
||||||
|
@ -1,20 +1,12 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import { useWeb3 } from '@context/Web3'
|
import { useWeb3 } from '@context/Web3'
|
||||||
import { addCustomNetwork } from '@utils/web3'
|
|
||||||
import Button from '@shared/atoms/Button'
|
import Button from '@shared/atoms/Button'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
|
import { addCustomNetwork } from '@utils/web3'
|
||||||
import useNetworkMetadata, {
|
import useNetworkMetadata, {
|
||||||
getNetworkDataById,
|
getNetworkDataById,
|
||||||
getNetworkDisplayName
|
getNetworkDisplayName
|
||||||
} from '@hooks/useNetworkMetadata'
|
} from '@hooks/useNetworkMetadata'
|
||||||
import {
|
|
||||||
addCustomNetwork,
|
|
||||||
getNetworkDisplayName,
|
|
||||||
getNetworkDataById
|
|
||||||
} from '@utils/web3'
|
|
||||||
import Button from '@shared/atoms/Button'
|
|
||||||
import styles from './WalletNetworkSwitcher.module.css'
|
|
||||||
import useNetworkMetadata from '@hooks/useNetworkMetadata'
|
|
||||||
import { useAsset } from '@context/Asset'
|
import { useAsset } from '@context/Asset'
|
||||||
|
|
||||||
export default function WalletNetworkSwitcher(): ReactElement {
|
export default function WalletNetworkSwitcher(): ReactElement {
|
||||||
|
@ -1,13 +1,8 @@
|
|||||||
import React, { ReactElement, useEffect, useState } from 'react'
|
import React, { ReactElement, useEffect, useState } from 'react'
|
||||||
import { useWeb3 } from '@context/Web3'
|
import { useWeb3 } from '@context/Web3'
|
||||||
import Status from '@shared/atoms/Status'
|
import Status from '@shared/atoms/Status'
|
||||||
<<<<<<< HEAD:src/components/@shared/Web3Feedback/index.tsx
|
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import WalletNetworkSwitcher from '../WalletNetworkSwitcher'
|
import WalletNetworkSwitcher from '../WalletNetworkSwitcher'
|
||||||
=======
|
|
||||||
import styles from './Web3Feedback.module.css'
|
|
||||||
import WalletNetworkSwitcher from './WalletNetworkSwitcher'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/Web3Feedback.tsx
|
|
||||||
import { useGraphSyncStatus } from '@hooks/useGraphSyncStatus'
|
import { useGraphSyncStatus } from '@hooks/useGraphSyncStatus'
|
||||||
|
|
||||||
export declare type Web3Error = {
|
export declare type Web3Error = {
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
.app {
|
.app {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: url('../../../node_modules/@oceanprotocol/art/waves/waves.svg')
|
background: url('../../../node_modules/@oceanprotocol/art/waves/waves.svg')
|
||||||
|
no-repeat center 13.5rem;
|
||||||
|
|
||||||
/* sticky footer technique */
|
/* sticky footer technique */
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -1,69 +1,50 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import { graphql, PageProps, useStaticQuery } from 'gatsby'
|
|
||||||
import Alert from '@shared/atoms/Alert'
|
import Alert from '@shared/atoms/Alert'
|
||||||
import Footer from '../Footer/Footer'
|
import Footer from '../Footer/Footer'
|
||||||
import Header from '../Header'
|
import Header from '../Header'
|
||||||
import StylesGlobal from '../../stylesGlobal/StylesGlobal'
|
|
||||||
import { useWeb3 } from '@context/Web3'
|
import { useWeb3 } from '@context/Web3'
|
||||||
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
||||||
import { useAccountPurgatory } from '@hooks/useAccountPurgatory'
|
import { useAccountPurgatory } from '@hooks/useAccountPurgatory'
|
||||||
import AnnouncementBanner from '@shared/AnnouncementBanner'
|
import AnnouncementBanner from '@shared/AnnouncementBanner'
|
||||||
import PrivacyPreferenceCenter from '../Privacy/PrivacyPreferenceCenter'
|
import PrivacyPreferenceCenter from '../Privacy/PrivacyPreferenceCenter'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
|
import { ToastContainer } from 'react-toastify'
|
||||||
const contentQuery = graphql`
|
import { useRouter } from 'next/router'
|
||||||
query AppQuery {
|
// import waves from '@oceanprotocol/art/waves/waves.png'
|
||||||
purgatory: allFile(filter: { relativePath: { eq: "purgatory.json" } }) {
|
import content from '../../../content/purgatory.json'
|
||||||
edges {
|
|
||||||
node {
|
|
||||||
childContentJson {
|
|
||||||
account {
|
|
||||||
title
|
|
||||||
description
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
export default function App({
|
export default function App({
|
||||||
children,
|
children
|
||||||
...props
|
|
||||||
}: {
|
}: {
|
||||||
children: ReactElement
|
children: ReactElement
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const data = useStaticQuery(contentQuery)
|
const router = useRouter()
|
||||||
const purgatory = data.purgatory.edges[0].node.childContentJson.account
|
|
||||||
|
|
||||||
const { warning, appConfig } = useSiteMetadata()
|
const { warning, appConfig } = useSiteMetadata()
|
||||||
const { accountId } = useWeb3()
|
const { accountId } = useWeb3()
|
||||||
const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
|
const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StylesGlobal>
|
<div className={styles.app}>
|
||||||
<div className={styles.app}>
|
{router.pathname === '/' && <AnnouncementBanner text={warning.main} />}
|
||||||
{(props as PageProps).uri === '/' && (
|
<Header />
|
||||||
<AnnouncementBanner text={warning.main} />
|
|
||||||
)}
|
|
||||||
<Header />
|
|
||||||
|
|
||||||
{isInPurgatory && (
|
{isInPurgatory && (
|
||||||
<Alert
|
<Alert
|
||||||
title={purgatory.title}
|
title={content.account.title}
|
||||||
badge={`Reason: ${purgatoryData?.reason}`}
|
badge={`Reason: ${purgatoryData?.reason}`}
|
||||||
text={purgatory.description}
|
text={content.account.description}
|
||||||
state="error"
|
state="error"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<main className={styles.main}>{children}</main>
|
<main className={styles.main}>{children}</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
||||||
{appConfig.privacyPreferenceCenter === 'true' && (
|
{appConfig.privacyPreferenceCenter === 'true' && (
|
||||||
<PrivacyPreferenceCenter style="small" />
|
<PrivacyPreferenceCenter style="small" />
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</StylesGlobal>
|
<ToastContainer position="bottom-right" newestOnTop />
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,15 +1,7 @@
|
|||||||
<<<<<<< HEAD:src/components/Asset/AssetActions/AssetActionHistoryTable.tsx
|
|
||||||
import React, { ReactElement, ReactNode, useState } from 'react'
|
import React, { ReactElement, ReactNode, useState } from 'react'
|
||||||
import Button from '@shared/atoms/Button'
|
import Button from '@shared/atoms/Button'
|
||||||
import styles from './AssetActionHistoryTable.module.css'
|
import styles from './AssetActionHistoryTable.module.css'
|
||||||
import Caret from '@images/caret.svg'
|
import Caret from '@images/caret.svg'
|
||||||
=======
|
|
||||||
import React, { ReactElement, useState } from 'react'
|
|
||||||
import Button from '@shared/atoms/Button'
|
|
||||||
import styles from './AssetActionHistoryTable.module.css'
|
|
||||||
import { ReactComponent as Caret } from '@images/caret.svg'
|
|
||||||
import { ReactNode } from 'react-markdown'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/AssetActionHistoryTable.tsx
|
|
||||||
|
|
||||||
export default function AssetActionHistoryTable({
|
export default function AssetActionHistoryTable({
|
||||||
title,
|
title,
|
||||||
|
@ -34,7 +34,7 @@ import { secondsToString } from '@utils/metadata'
|
|||||||
import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
|
import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
|
||||||
import AlgorithmDatasetsListForCompute from '../../AssetContent/AlgorithmDatasetsListForCompute'
|
import AlgorithmDatasetsListForCompute from '../../AssetContent/AlgorithmDatasetsListForCompute'
|
||||||
import { getPreviousOrders, getPrice } from '@utils/subgraph'
|
import { getPreviousOrders, getPrice } from '@utils/subgraph'
|
||||||
import AssetActionHistoryTable from '@shared/AssetActionHistoryTable'
|
import AssetActionHistoryTable from '../AssetActionHistoryTable'
|
||||||
import ComputeJobs from '../../../Profile/History/ComputeJobs'
|
import ComputeJobs from '../../../Profile/History/ComputeJobs'
|
||||||
import { useCancelToken } from '@hooks/useCancelToken'
|
import { useCancelToken } from '@hooks/useCancelToken'
|
||||||
import { useIsMounted } from '@hooks/useIsMounted'
|
import { useIsMounted } from '@hooks/useIsMounted'
|
||||||
|
@ -11,7 +11,6 @@ import styles from './index.module.css'
|
|||||||
import { transformComputeFormToServiceComputePrivacy } from '@utils/compute'
|
import { transformComputeFormToServiceComputePrivacy } from '@utils/compute'
|
||||||
import { setMinterToDispenser, setMinterToPublisher } from '@utils/freePrice'
|
import { setMinterToDispenser, setMinterToPublisher } from '@utils/freePrice'
|
||||||
import Web3Feedback from '@shared/Web3Feedback'
|
import Web3Feedback from '@shared/Web3Feedback'
|
||||||
import MetadataFeedback from '../../../Publish/MetadataFeedback'
|
|
||||||
import { getInitialValues, validationSchema } from './_constants'
|
import { getInitialValues, validationSchema } from './_constants'
|
||||||
import content from '../../../../../content/pages/editComputeDataset.json'
|
import content from '../../../../../content/pages/editComputeDataset.json'
|
||||||
|
|
||||||
@ -106,19 +105,7 @@ export default function EditComputeDataset({
|
|||||||
>
|
>
|
||||||
{({ values, isSubmitting }) =>
|
{({ values, isSubmitting }) =>
|
||||||
isSubmitting || hasFeedback ? (
|
isSubmitting || hasFeedback ? (
|
||||||
<MetadataFeedback
|
<div />
|
||||||
title="Updating Data Set"
|
|
||||||
error={error}
|
|
||||||
success={success}
|
|
||||||
setError={setError}
|
|
||||||
successAction={{
|
|
||||||
name: content.form.successAction,
|
|
||||||
onClick: async () => {
|
|
||||||
await refreshDdo()
|
|
||||||
setShowEdit(false)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<p className={styles.description}>{content.description}</p>
|
<p className={styles.description}>{content.description}</p>
|
||||||
|
@ -12,8 +12,6 @@ import { Logger } from '@oceanprotocol/lib'
|
|||||||
import { useWeb3 } from '@context/Web3'
|
import { useWeb3 } from '@context/Web3'
|
||||||
import { useOcean } from '@context/Ocean'
|
import { useOcean } from '@context/Ocean'
|
||||||
import { setMinterToDispenser, setMinterToPublisher } from '@utils/freePrice'
|
import { setMinterToDispenser, setMinterToPublisher } from '@utils/freePrice'
|
||||||
import { MetadataPreview } from '../../../Publish/MetadataPreview'
|
|
||||||
import MetadataFeedback from '../../../Publish/MetadataFeedback'
|
|
||||||
import content from '../../../../../content/pages/edit.json'
|
import content from '../../../../../content/pages/edit.json'
|
||||||
|
|
||||||
export default function Edit({
|
export default function Edit({
|
||||||
@ -139,19 +137,7 @@ export default function Edit({
|
|||||||
>
|
>
|
||||||
{({ isSubmitting, values, initialValues }) =>
|
{({ isSubmitting, values, initialValues }) =>
|
||||||
isSubmitting || hasFeedback ? (
|
isSubmitting || hasFeedback ? (
|
||||||
<MetadataFeedback
|
<div />
|
||||||
title="Updating Data Set"
|
|
||||||
error={error}
|
|
||||||
success={success}
|
|
||||||
setError={setError}
|
|
||||||
successAction={{
|
|
||||||
name: content.form.successAction,
|
|
||||||
onClick: async () => {
|
|
||||||
await refreshDdo()
|
|
||||||
setShowEdit(false)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<p className={styles.description}>{content.description}</p>
|
<p className={styles.description}>{content.description}</p>
|
||||||
@ -166,7 +152,6 @@ export default function Edit({
|
|||||||
/> */}
|
/> */}
|
||||||
|
|
||||||
<aside>
|
<aside>
|
||||||
{/* <MetadataPreview values={values} /> */}
|
|
||||||
<Web3Feedback />
|
<Web3Feedback />
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
@ -16,14 +16,6 @@ import EditHistory from './EditHistory'
|
|||||||
import { useWeb3 } from '@context/Web3'
|
import { useWeb3 } from '@context/Web3'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import NetworkName from '@shared/NetworkName'
|
import NetworkName from '@shared/NetworkName'
|
||||||
import NetworkName from '@shared/atoms/NetworkName'
|
|
||||||
|
|
||||||
export interface AssetContentProps {
|
|
||||||
path?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const contentQuery = graphql`
|
|
||||||
query AssetContentQuery {
|
|
||||||
import content from '../../../../content/purgatory.json'
|
import content from '../../../../content/purgatory.json'
|
||||||
|
|
||||||
export default function AssetContent(): ReactElement {
|
export default function AssetContent(): ReactElement {
|
||||||
|
@ -3,8 +3,8 @@ import Label from '@shared/Form/Input/Label'
|
|||||||
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
||||||
import FormHelp from '@shared/Form/Input/Help'
|
import FormHelp from '@shared/Form/Input/Help'
|
||||||
import Tooltip from '@shared/atoms/Tooltip'
|
import Tooltip from '@shared/atoms/Tooltip'
|
||||||
import { ReactComponent as Caret } from '@images/caret.svg'
|
import Caret from '@images/caret.svg'
|
||||||
import { ReactComponent as Network } from '@images/network.svg'
|
import Network from '@images/network.svg'
|
||||||
import NetworksList from './NetworksList'
|
import NetworksList from './NetworksList'
|
||||||
import stylesIndex from '../index.module.css'
|
import stylesIndex from '../index.module.css'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
|
@ -1,10 +1,6 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import Menu from './Menu'
|
import Menu from './Menu'
|
||||||
<<<<<<< HEAD:src/components/Header/index.tsx
|
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
=======
|
|
||||||
import styles from './Header.module.css'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/Header/Header.tsx
|
|
||||||
|
|
||||||
export default function Header(): ReactElement {
|
export default function Header(): ReactElement {
|
||||||
return (
|
return (
|
||||||
|
@ -1,9 +1,5 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
<<<<<<< HEAD:src/components/Profile/Header/NumberUnit.tsx
|
|
||||||
import Markdown from '@shared/Markdown'
|
import Markdown from '@shared/Markdown'
|
||||||
=======
|
|
||||||
import Markdown from '@shared/atoms/Markdown'
|
|
||||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/NumberUnit.tsx
|
|
||||||
import Tooltip from '@shared/atoms/Tooltip'
|
import Tooltip from '@shared/atoms/Tooltip'
|
||||||
import styles from './NumberUnit.module.css'
|
import styles from './NumberUnit.module.css'
|
||||||
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import DebugOutput from '@shared/atoms/DebugOutput'
|
import DebugOutput from '@shared/DebugOutput'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import { transformPublishFormToMetadata } from '@utils/metadata'
|
// import { transformPublishFormToMetadata } from '@utils/metadata'
|
||||||
import { FormPublishData } from './_types'
|
import { FormPublishData } from './_types'
|
||||||
|
|
||||||
export default function Debug({
|
export default function Debug({
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
// import React, {
|
import React, {
|
||||||
// ReactElement,
|
ReactElement,
|
||||||
// useEffect,
|
useEffect,
|
||||||
// useState,
|
useState,
|
||||||
// FormEvent,
|
FormEvent,
|
||||||
// ChangeEvent
|
ChangeEvent
|
||||||
// } from 'react'
|
} from 'react'
|
||||||
// import { useStaticQuery, graphql } from 'gatsby'
|
// import { useStaticQuery, graphql } from 'gatsby'
|
||||||
// import { useFormikContext, Field, Form, FormikContextType } from 'formik'
|
// import { useFormikContext, Field, Form, FormikContextType } from 'formik'
|
||||||
// import Input from '../../atoms/Input'
|
// import Input from '../../atoms/Input'
|
||||||
|
19
src/components/Publish/FormPublish/Metadata/index.tsx
Normal file
19
src/components/Publish/FormPublish/Metadata/index.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import Input from '@shared/Form/Input'
|
||||||
|
import { Field } from 'formik'
|
||||||
|
import React, { ReactElement } from 'react'
|
||||||
|
import content from '../../../../../content/publish/form.json'
|
||||||
|
|
||||||
|
export default function MetadataFields(): ReactElement {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{content.metadata.fields.map((field: FormFieldProps) => (
|
||||||
|
<Field
|
||||||
|
{...field}
|
||||||
|
key={`metadata-${field.name}`}
|
||||||
|
component={Input}
|
||||||
|
name={`metadata.${field.name}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
@ -2,7 +2,7 @@ import React, { FormEvent, ReactElement, useState } from 'react'
|
|||||||
import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
|
import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
|
||||||
import Markdown from '@shared/Markdown'
|
import Markdown from '@shared/Markdown'
|
||||||
import Tags from '@shared/atoms/Tags'
|
import Tags from '@shared/atoms/Tags'
|
||||||
import MetaItem from '../../components/Asset/AssetContent/MetaItem'
|
import MetaItem from '../../../Asset/AssetContent/MetaItem'
|
||||||
import FileIcon from '@shared/FileIcon'
|
import FileIcon from '@shared/FileIcon'
|
||||||
import Button from '@shared/atoms/Button'
|
import Button from '@shared/atoms/Button'
|
||||||
import { transformTags } from '@utils/metadata'
|
import { transformTags } from '@utils/metadata'
|
||||||
@ -11,7 +11,7 @@ import { useWeb3 } from '@context/Web3'
|
|||||||
import styles from './MetadataPreview.module.css'
|
import styles from './MetadataPreview.module.css'
|
||||||
import Web3Feedback from '@shared/Web3Feedback'
|
import Web3Feedback from '@shared/Web3Feedback'
|
||||||
import { useAsset } from '@context/Asset'
|
import { useAsset } from '@context/Asset'
|
||||||
import { FormPublishData } from './_types'
|
import { FormPublishData } from '../../_types'
|
||||||
|
|
||||||
function Description({ description }: { description: string }) {
|
function Description({ description }: { description: string }) {
|
||||||
const [fullDescription, setFullDescription] = useState<boolean>(false)
|
const [fullDescription, setFullDescription] = useState<boolean>(false)
|
@ -1,7 +1,6 @@
|
|||||||
import React, { ReactElement, useEffect } from 'react'
|
import React, { ReactElement, useEffect } from 'react'
|
||||||
import { useFormikContext } from 'formik'
|
import { useFormikContext } from 'formik'
|
||||||
import { DDO } from '@oceanprotocol/lib'
|
import { DDO } from '@oceanprotocol/lib'
|
||||||
import { graphql, useStaticQuery } from 'gatsby'
|
|
||||||
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
||||||
import Tabs from '@shared/atoms/Tabs'
|
import Tabs from '@shared/atoms/Tabs'
|
||||||
import { isValidNumber } from '@utils/numbers'
|
import { isValidNumber } from '@utils/numbers'
|
||||||
@ -10,57 +9,9 @@ import { FormPublishData } from '../../_types'
|
|||||||
import Dynamic from './Dynamic'
|
import Dynamic from './Dynamic'
|
||||||
import Fixed from './Fixed'
|
import Fixed from './Fixed'
|
||||||
import Free from './Free'
|
import Free from './Free'
|
||||||
|
import content from '../../../../../content/price.json'
|
||||||
|
|
||||||
const query = graphql`
|
export default function PricingFields(): ReactElement {
|
||||||
query PricingQuery {
|
|
||||||
content: allFile(filter: { relativePath: { eq: "price.json" } }) {
|
|
||||||
edges {
|
|
||||||
node {
|
|
||||||
childContentJson {
|
|
||||||
create {
|
|
||||||
empty {
|
|
||||||
title
|
|
||||||
info
|
|
||||||
action {
|
|
||||||
name
|
|
||||||
help
|
|
||||||
}
|
|
||||||
}
|
|
||||||
fixed {
|
|
||||||
title
|
|
||||||
info
|
|
||||||
tooltips {
|
|
||||||
communityFee
|
|
||||||
marketplaceFee
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dynamic {
|
|
||||||
title
|
|
||||||
info
|
|
||||||
tooltips {
|
|
||||||
poolInfo
|
|
||||||
swapFee
|
|
||||||
communityFee
|
|
||||||
marketplaceFee
|
|
||||||
}
|
|
||||||
}
|
|
||||||
free {
|
|
||||||
title
|
|
||||||
info
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
export default function Pricing(): ReactElement {
|
|
||||||
// Get content
|
|
||||||
const data = useStaticQuery(query)
|
|
||||||
const content = data.content.edges[0].node.childContentJson.create
|
|
||||||
|
|
||||||
const { appConfig } = useSiteMetadata()
|
const { appConfig } = useSiteMetadata()
|
||||||
|
|
||||||
// Connect with main publish form
|
// Connect with main publish form
|
||||||
@ -96,20 +47,20 @@ export default function Pricing(): ReactElement {
|
|||||||
const tabs = [
|
const tabs = [
|
||||||
appConfig.allowFixedPricing === 'true'
|
appConfig.allowFixedPricing === 'true'
|
||||||
? {
|
? {
|
||||||
title: content.fixed.title,
|
title: content.create.fixed.title,
|
||||||
content: <Fixed content={content.fixed} />
|
content: <Fixed content={content.create.fixed} />
|
||||||
}
|
}
|
||||||
: undefined,
|
: undefined,
|
||||||
appConfig.allowDynamicPricing === 'true'
|
appConfig.allowDynamicPricing === 'true'
|
||||||
? {
|
? {
|
||||||
title: content.dynamic.title,
|
title: content.create.dynamic.title,
|
||||||
content: <Dynamic content={content.dynamic} />
|
content: <Dynamic content={content.create.dynamic} />
|
||||||
}
|
}
|
||||||
: undefined,
|
: undefined,
|
||||||
appConfig.allowFreePricing === 'true'
|
appConfig.allowFreePricing === 'true'
|
||||||
? {
|
? {
|
||||||
title: content.free.title,
|
title: content.create.free.title,
|
||||||
content: <Free content={content.free} />
|
content: <Free content={content.create.free} />
|
||||||
}
|
}
|
||||||
: undefined
|
: undefined
|
||||||
].filter((tab) => tab !== undefined)
|
].filter((tab) => tab !== undefined)
|
||||||
|
40
src/components/Publish/FormPublish/Services/index.tsx
Normal file
40
src/components/Publish/FormPublish/Services/index.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import Input from '@shared/Form/Input'
|
||||||
|
import { Field } from 'formik'
|
||||||
|
import React, { ReactElement } from 'react'
|
||||||
|
import IconDownload from '@images/download.svg'
|
||||||
|
import IconCompute from '@images/compute.svg'
|
||||||
|
import content from '../../../../../content/publish/form.json'
|
||||||
|
|
||||||
|
const accessTypeOptions = [
|
||||||
|
{
|
||||||
|
name: 'Download',
|
||||||
|
title: 'Download',
|
||||||
|
icon: <IconDownload />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Compute',
|
||||||
|
title: 'Compute',
|
||||||
|
icon: <IconCompute />
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function ServicesFields(): ReactElement {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{content.services.fields.map(
|
||||||
|
(field: FormFieldProps) =>
|
||||||
|
field.advanced !== true && (
|
||||||
|
<Field
|
||||||
|
{...field}
|
||||||
|
key={`services-${field.name}`}
|
||||||
|
component={Input}
|
||||||
|
name={`services[0].${field.name}`}
|
||||||
|
options={
|
||||||
|
field.name === 'access' ? accessTypeOptions : field.options
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
@ -1,169 +1,35 @@
|
|||||||
import React, {
|
import React, { ReactElement, FormEvent } from 'react'
|
||||||
ReactElement,
|
import { useFormikContext, Form, FormikContextType } from 'formik'
|
||||||
useEffect,
|
|
||||||
FormEvent,
|
|
||||||
ChangeEvent,
|
|
||||||
useState
|
|
||||||
} from 'react'
|
|
||||||
import { useStaticQuery, graphql } from 'gatsby'
|
|
||||||
import { useFormikContext, Field, Form, FormikContextType } from 'formik'
|
|
||||||
import Input from '@shared/Form/Input'
|
|
||||||
import { ReactComponent as Download } from '@images/download.svg'
|
|
||||||
import { ReactComponent as Compute } from '@images/compute.svg'
|
|
||||||
import FormActions from './FormActions'
|
import FormActions from './FormActions'
|
||||||
import AdvancedSettings from '@shared/Form/FormFields/AdvancedSettings'
|
|
||||||
import { FormPublishData } from '../_types'
|
import { FormPublishData } from '../_types'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import { initialValues } from '../_constants'
|
import { initialValues } from '../_constants'
|
||||||
import Tabs from '@shared/atoms/Tabs'
|
import Tabs from '@shared/atoms/Tabs'
|
||||||
import Pricing from './Pricing'
|
import PricingFields from './Pricing'
|
||||||
import Debug from '../Debug'
|
import Debug from '../Debug'
|
||||||
|
import MetadataFields from './Metadata'
|
||||||
const query = graphql`
|
import ServicesFields from './Services'
|
||||||
query {
|
import content from '../../../../content/publish/form.json'
|
||||||
content: publishJson {
|
|
||||||
metadata {
|
|
||||||
title
|
|
||||||
fields {
|
|
||||||
name
|
|
||||||
placeholder
|
|
||||||
label
|
|
||||||
help
|
|
||||||
type
|
|
||||||
required
|
|
||||||
options
|
|
||||||
disclaimer
|
|
||||||
disclaimerValues
|
|
||||||
advanced
|
|
||||||
}
|
|
||||||
}
|
|
||||||
services {
|
|
||||||
title
|
|
||||||
fields {
|
|
||||||
name
|
|
||||||
placeholder
|
|
||||||
label
|
|
||||||
help
|
|
||||||
type
|
|
||||||
required
|
|
||||||
options
|
|
||||||
disclaimer
|
|
||||||
disclaimerValues
|
|
||||||
advanced
|
|
||||||
}
|
|
||||||
}
|
|
||||||
pricing {
|
|
||||||
title
|
|
||||||
fields {
|
|
||||||
name
|
|
||||||
placeholder
|
|
||||||
label
|
|
||||||
help
|
|
||||||
type
|
|
||||||
required
|
|
||||||
options
|
|
||||||
disclaimer
|
|
||||||
disclaimerValues
|
|
||||||
advanced
|
|
||||||
}
|
|
||||||
}
|
|
||||||
warning
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
const accessTypeOptions = [
|
|
||||||
{
|
|
||||||
name: 'Download',
|
|
||||||
title: 'Download',
|
|
||||||
icon: <Download />
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Compute',
|
|
||||||
title: 'Compute',
|
|
||||||
icon: <Compute />
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function FormPublish(): ReactElement {
|
export default function FormPublish(): ReactElement {
|
||||||
const { content } = useStaticQuery(query)
|
const { isValid, values, resetForm }: FormikContextType<FormPublishData> =
|
||||||
|
useFormikContext()
|
||||||
const {
|
|
||||||
setStatus,
|
|
||||||
isValid,
|
|
||||||
values,
|
|
||||||
setErrors,
|
|
||||||
setTouched,
|
|
||||||
resetForm,
|
|
||||||
validateField,
|
|
||||||
setFieldValue
|
|
||||||
}: FormikContextType<FormPublishData> = useFormikContext()
|
|
||||||
|
|
||||||
const [computeTypeSelected, setComputeTypeSelected] = useState<boolean>(false)
|
|
||||||
|
|
||||||
// reset form validation on every mount
|
// reset form validation on every mount
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
setErrors({})
|
// setErrors({})
|
||||||
setTouched({})
|
// setTouched({})
|
||||||
|
|
||||||
// setSubmitting(false)
|
// // setSubmitting(false)
|
||||||
}, [setErrors, setTouched])
|
// }, [setErrors, setTouched])
|
||||||
|
|
||||||
const computeTypeOptions = ['1 day', '1 week', '1 month', '1 year']
|
|
||||||
|
|
||||||
// Manually handle change events instead of using `handleChange` from Formik.
|
|
||||||
// Workaround for default `validateOnChange` not kicking in
|
|
||||||
function handleFieldChange(
|
|
||||||
e: ChangeEvent<HTMLInputElement>,
|
|
||||||
field: FormFieldProps
|
|
||||||
) {
|
|
||||||
const value =
|
|
||||||
field.type === 'terms' ? !JSON.parse(e.target.value) : e.target.value
|
|
||||||
|
|
||||||
if (field.name === 'access' && value === 'Compute') {
|
|
||||||
setComputeTypeSelected(true)
|
|
||||||
if (values.timeout === 'Forever')
|
|
||||||
setFieldValue('timeout', computeTypeOptions[0])
|
|
||||||
} else {
|
|
||||||
if (field.name === 'access' && value === 'Download') {
|
|
||||||
setComputeTypeSelected(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
validateField(field.name)
|
|
||||||
setFieldValue(field.name, value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const resetFormAndClearStorage = (e: FormEvent<Element>) => {
|
const resetFormAndClearStorage = (e: FormEvent<Element>) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
resetForm({
|
resetForm({
|
||||||
values: initialValues as FormPublishData,
|
values: initialValues as FormPublishData,
|
||||||
status: 'empty'
|
status: 'empty'
|
||||||
})
|
})
|
||||||
setStatus('empty')
|
|
||||||
}
|
|
||||||
|
|
||||||
function getStepContentFields(contentStep: FormStepContent) {
|
|
||||||
return contentStep.fields.map(
|
|
||||||
(field: FormFieldProps) =>
|
|
||||||
field.advanced !== true && (
|
|
||||||
<Field
|
|
||||||
key={field.name}
|
|
||||||
{...field}
|
|
||||||
options={
|
|
||||||
field.type === 'boxSelection'
|
|
||||||
? accessTypeOptions
|
|
||||||
: field.name === 'timeout' && computeTypeSelected === true
|
|
||||||
? computeTypeOptions
|
|
||||||
: field.options
|
|
||||||
}
|
|
||||||
component={Input}
|
|
||||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
|
||||||
handleFieldChange(e, field)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
@ -171,11 +37,7 @@ export default function FormPublish(): ReactElement {
|
|||||||
title: content.metadata.title,
|
title: content.metadata.title,
|
||||||
content: (
|
content: (
|
||||||
<>
|
<>
|
||||||
{getStepContentFields(content.metadata)}
|
<MetadataFields />
|
||||||
<AdvancedSettings
|
|
||||||
content={content.metadata}
|
|
||||||
handleFieldChange={handleFieldChange}
|
|
||||||
/>
|
|
||||||
<FormActions
|
<FormActions
|
||||||
isValid={isValid}
|
isValid={isValid}
|
||||||
resetFormAndClearStorage={resetFormAndClearStorage}
|
resetFormAndClearStorage={resetFormAndClearStorage}
|
||||||
@ -187,11 +49,7 @@ export default function FormPublish(): ReactElement {
|
|||||||
title: content.services.title,
|
title: content.services.title,
|
||||||
content: (
|
content: (
|
||||||
<>
|
<>
|
||||||
{getStepContentFields(content.services)}
|
<ServicesFields />
|
||||||
<AdvancedSettings
|
|
||||||
content={content.services}
|
|
||||||
handleFieldChange={handleFieldChange}
|
|
||||||
/>
|
|
||||||
<FormActions
|
<FormActions
|
||||||
isValid={isValid}
|
isValid={isValid}
|
||||||
resetFormAndClearStorage={resetFormAndClearStorage}
|
resetFormAndClearStorage={resetFormAndClearStorage}
|
||||||
@ -203,7 +61,7 @@ export default function FormPublish(): ReactElement {
|
|||||||
title: content.pricing.title,
|
title: content.pricing.title,
|
||||||
content: (
|
content: (
|
||||||
<>
|
<>
|
||||||
<Pricing />
|
<PricingFields />
|
||||||
<FormActions
|
<FormActions
|
||||||
isValid={isValid}
|
isValid={isValid}
|
||||||
resetFormAndClearStorage={resetFormAndClearStorage}
|
resetFormAndClearStorage={resetFormAndClearStorage}
|
||||||
|
@ -1,43 +0,0 @@
|
|||||||
.feedback {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 40vh;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
composes: box from '@shared/atoms/Box.module.css';
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feedback h3 {
|
|
||||||
font-size: var(--font-size-large);
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: calc(var(--spacer) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feedback h3 + div {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 40rem) {
|
|
||||||
.feedback {
|
|
||||||
max-width: 30rem;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.feedback [class*='loaderWrap'] {
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action {
|
|
||||||
margin-top: calc(var(--spacer) / 1.5);
|
|
||||||
}
|
|
||||||
.moreInfo {
|
|
||||||
padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2) !important;
|
|
||||||
}
|
|
@ -1,94 +0,0 @@
|
|||||||
import Alert from '@shared/atoms/Alert'
|
|
||||||
import Button from '@shared/atoms/Button'
|
|
||||||
import Loader from '@shared/atoms/Loader'
|
|
||||||
import React, { ReactElement, useState, FormEvent } from 'react'
|
|
||||||
import styles from './MetadataFeedback.module.css'
|
|
||||||
import SuccessConfetti from '@shared/SuccessConfetti'
|
|
||||||
|
|
||||||
interface Action {
|
|
||||||
name: string
|
|
||||||
onClick?: () => void
|
|
||||||
to?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
function ActionSuccess({ action }: { action: Action }) {
|
|
||||||
const { name, onClick, to } = action
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
style="primary"
|
|
||||||
size="small"
|
|
||||||
onClick={onClick || null}
|
|
||||||
to={to || null}
|
|
||||||
className={styles.action}
|
|
||||||
>
|
|
||||||
{name}
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function ActionError({ setError }: { setError: (error: string) => void }) {
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
style="primary"
|
|
||||||
size="small"
|
|
||||||
className={styles.action}
|
|
||||||
onClick={() => setError(undefined)}
|
|
||||||
>
|
|
||||||
Try Again
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function MetadataFeedback({
|
|
||||||
title,
|
|
||||||
error,
|
|
||||||
success,
|
|
||||||
loading,
|
|
||||||
successAction,
|
|
||||||
setError
|
|
||||||
}: {
|
|
||||||
title: string
|
|
||||||
error: string
|
|
||||||
success: string
|
|
||||||
loading?: string
|
|
||||||
successAction: Action
|
|
||||||
setError: (error: string) => void
|
|
||||||
}): ReactElement {
|
|
||||||
const [moreInfo, setMoreInfo] = useState<boolean>(false)
|
|
||||||
|
|
||||||
function toggleMoreInfo(e: FormEvent<Element>) {
|
|
||||||
e.preventDefault()
|
|
||||||
moreInfo === true ? setMoreInfo(false) : setMoreInfo(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.feedback}>
|
|
||||||
<div className={styles.box}>
|
|
||||||
<h3>{title}</h3>
|
|
||||||
{error ? (
|
|
||||||
<>
|
|
||||||
<p>Sorry, something went wrong. Please try again.</p>
|
|
||||||
{moreInfo && <Alert text={error} state="error" />}
|
|
||||||
<Button
|
|
||||||
style="text"
|
|
||||||
size="small"
|
|
||||||
onClick={toggleMoreInfo}
|
|
||||||
className={styles.moreInfo}
|
|
||||||
>
|
|
||||||
{moreInfo === false ? 'More Info' : 'Hide error'}
|
|
||||||
</Button>
|
|
||||||
<ActionError setError={setError} />
|
|
||||||
</>
|
|
||||||
) : success ? (
|
|
||||||
<SuccessConfetti
|
|
||||||
success={success}
|
|
||||||
action={<ActionSuccess action={successAction} />}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Loader message={loading} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
@ -3,27 +3,9 @@ import NetworkName from '@shared/NetworkName'
|
|||||||
import Tooltip from '@shared/atoms/Tooltip'
|
import Tooltip from '@shared/atoms/Tooltip'
|
||||||
import { useWeb3 } from '@context/Web3'
|
import { useWeb3 } from '@context/Web3'
|
||||||
import styles from './Title.module.css'
|
import styles from './Title.module.css'
|
||||||
|
import content from '../../../content/publish/index.json'
|
||||||
import { graphql, useStaticQuery } from 'gatsby'
|
|
||||||
|
|
||||||
const query = graphql`
|
|
||||||
query {
|
|
||||||
content: allFile(filter: { relativePath: { eq: "publish/index.json" } }) {
|
|
||||||
edges {
|
|
||||||
node {
|
|
||||||
childPublishJson {
|
|
||||||
title
|
|
||||||
tooltipNetwork
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
export default function Title(): ReactElement {
|
export default function Title(): ReactElement {
|
||||||
const data = useStaticQuery(query)
|
|
||||||
const content = data.content.edges[0].node.childPublishJson
|
|
||||||
const { networkId } = useWeb3()
|
const { networkId } = useWeb3()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import React, { ReactElement, useState, useEffect } from 'react'
|
import React, { ReactElement, useState, useEffect } from 'react'
|
||||||
import Permission from '@shared/Permission'
|
|
||||||
import { Formik, FormikState } from 'formik'
|
import { Formik, FormikState } from 'formik'
|
||||||
import { usePublish } from '@hooks/usePublish'
|
import { usePublish } from '@hooks/usePublish'
|
||||||
import { initialValues, validationSchema } from './_constants'
|
import { initialValues, validationSchema } from './_constants'
|
||||||
@ -81,6 +80,10 @@ export default function PublishPage({
|
|||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<PageHeader title={<Title />} description={content.description} />
|
||||||
|
|
||||||
{isInPurgatory && purgatoryData ? null : (
|
{isInPurgatory && purgatoryData ? null : (
|
||||||
<Formik
|
<Formik
|
||||||
initialValues={initialValues}
|
initialValues={initialValues}
|
||||||
|
@ -2,12 +2,11 @@ import React, { ReactElement, useState } from 'react'
|
|||||||
import classNames from 'classnames/bind'
|
import classNames from 'classnames/bind'
|
||||||
import { addExistingParamsToUrl } from './utils'
|
import { addExistingParamsToUrl } from './utils'
|
||||||
import Button from '@shared/atoms/Button'
|
import Button from '@shared/atoms/Button'
|
||||||
import styles from './Filters.module.css'
|
|
||||||
import {
|
import {
|
||||||
FilterByAccessOptions,
|
FilterByAccessOptions,
|
||||||
FilterByTypeOptions
|
FilterByTypeOptions
|
||||||
} from '../../@types/aquarius/SearchQuery'
|
} from '../../@types/aquarius/SearchQuery'
|
||||||
import router, { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import styles from './Filters.module.css'
|
import styles from './Filters.module.css'
|
||||||
|
|
||||||
const cx = classNames.bind(styles)
|
const cx = classNames.bind(styles)
|
||||||
|
@ -8,19 +8,10 @@ import UrqlProvider from '@context/UrqlProvider'
|
|||||||
import ConsentProvider from '@context/CookieConsent'
|
import ConsentProvider from '@context/CookieConsent'
|
||||||
import App from 'src/components/App'
|
import App from 'src/components/App'
|
||||||
|
|
||||||
<<<<<<< HEAD:src/pages/_app.tsx
|
|
||||||
import '@oceanprotocol/typographies/css/ocean-typo.css'
|
import '@oceanprotocol/typographies/css/ocean-typo.css'
|
||||||
import '../stylesGlobal/styles.css'
|
import '../stylesGlobal/styles.css'
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }: AppProps): ReactElement {
|
function MyApp({ Component, pageProps }: AppProps): ReactElement {
|
||||||
=======
|
|
||||||
// Referenced in gatsby-browser.js & gatsby-ssr.js
|
|
||||||
export default function ContextProviders({
|
|
||||||
element
|
|
||||||
}: {
|
|
||||||
element: ReactElement
|
|
||||||
}): ReactElement {
|
|
||||||
>>>>>>> 4a56991b (more refactor):src/components/App/ContextProviders.tsx
|
|
||||||
return (
|
return (
|
||||||
<Web3Provider>
|
<Web3Provider>
|
||||||
<UrqlProvider>
|
<UrqlProvider>
|
||||||
|
@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
|
|||||||
import Publish from '../components/Publish'
|
import Publish from '../components/Publish'
|
||||||
import Page from '@shared/Page'
|
import Page from '@shared/Page'
|
||||||
import OceanProvider from '@context/Ocean'
|
import OceanProvider from '@context/Ocean'
|
||||||
import content from '../../content/pages/publish/index.json'
|
import content from '../../content/publish/index.json'
|
||||||
import router from 'next/router'
|
import router from 'next/router'
|
||||||
|
|
||||||
export default function PagePublish(): ReactElement {
|
export default function PagePublish(): ReactElement {
|
||||||
@ -10,7 +10,12 @@ export default function PagePublish(): ReactElement {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<OceanProvider>
|
<OceanProvider>
|
||||||
<Page title={title} description={description} uri={router.route}>
|
<Page
|
||||||
|
title={title}
|
||||||
|
description={description}
|
||||||
|
uri={router.route}
|
||||||
|
noPageHeader
|
||||||
|
>
|
||||||
<Publish content={content} />
|
<Publish content={content} />
|
||||||
</Page>
|
</Page>
|
||||||
</OceanProvider>
|
</OceanProvider>
|
||||||
|
Loading…
Reference in New Issue
Block a user