mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-23 01:36:47 +02:00
restructure form, dial back on overwriting native Formik functionality
This commit is contained in:
parent
99453623d2
commit
f2b1a33261
GPG Key ID:
606EEEF3C479A91F
|
|
@ -15,21 +15,6 @@
|
|||
"type": "textarea",
|
||||
"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",
|
||||
"label": "Author",
|
||||
|
|
@ -55,6 +40,28 @@
|
|||
"services": {
|
||||
"title": "Create services",
|
||||
"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",
|
||||
"label": "Access Type",
|
||||
|
|
@ -65,14 +72,6 @@
|
|||
"disclaimer": "Please do not provide downloadable personal data without the consent of the data subjects.",
|
||||
"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",
|
||||
"label": "Timeout",
|
||||
|
|
@ -82,17 +81,23 @@
|
|||
"sortOptions": false,
|
||||
"required": true
|
||||
},
|
||||
|
||||
{
|
||||
"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": "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
|
||||
}
|
||||
]
|
||||
},
|
||||
"pricing": {
|
||||
"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
|
||||
} from 'react'
|
||||
import { Logger, LogLevel } from '@oceanprotocol/lib'
|
||||
<<<<<<< HEAD:src/@context/UserPreferences.tsx
|
||||
import { isBrowser } from '@utils/index'
|
||||
=======
|
||||
import { isBrowser } from '../utils'
|
||||
>>>>>>> 14d71ad2 (reorganize all the things):src/context/UserPreferences.tsx
|
||||
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
||||
|
||||
interface UserPreferencesValue {
|
||||
|
|
|
|||
|
|
@ -1,35 +1,8 @@
|
|||
import { useStaticQuery, graphql } from 'gatsby'
|
||||
import { UseNetworkMetadata } from './types'
|
||||
|
||||
const networksQuery = graphql`
|
||||
query {
|
||||
allNetworksMetadataJson {
|
||||
edges {
|
||||
node {
|
||||
chain
|
||||
network
|
||||
networkId
|
||||
chainId
|
||||
rpc
|
||||
explorers {
|
||||
url
|
||||
}
|
||||
nativeCurrency {
|
||||
name
|
||||
symbol
|
||||
decimals
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
import networkdata from '../../../content/networks-metadata.json'
|
||||
|
||||
export default function useNetworkMetadata(): UseNetworkMetadata {
|
||||
const data = useStaticQuery(networksQuery)
|
||||
const networksList: { node: EthereumListsChain }[] =
|
||||
data.allNetworksMetadataJson.edges
|
||||
|
||||
const networksList: EthereumListsChain[] = networkdata
|
||||
return { networksList }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,4 +9,4 @@ export function useSiteMetadata(): UseSiteMetadata {
|
|||
}
|
||||
|
||||
return siteMeta
|
||||
}
|
||||
}
|
||||
|
|
@ -2,13 +2,8 @@ import React, { ReactElement } from 'react'
|
|||
import classNames from 'classnames/bind'
|
||||
import { addTokenToWallet } from '@utils/web3'
|
||||
import { useWeb3 } from '@context/Web3'
|
||||
<<<<<<< HEAD:src/components/@shared/AddToken/index.tsx
|
||||
import Button from '@shared/atoms/Button'
|
||||
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)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,8 @@
|
|||
import React, { ReactElement } from 'react'
|
||||
import classNames from 'classnames/bind'
|
||||
<<<<<<< HEAD:src/components/@shared/AnnouncementBanner/index.tsx
|
||||
import Markdown from '@shared/Markdown'
|
||||
import Button from '@shared/atoms/Button'
|
||||
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)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import Dotdotdot from 'react-dotdotdot'
|
||||
import { Link } from 'gatsby'
|
||||
import PriceUnit from '@shared/atoms/Price/PriceUnit'
|
||||
import Link from 'next/link'
|
||||
import PriceUnit from '@shared/Price/PriceUnit'
|
||||
import Loader from '@shared/atoms/Loader'
|
||||
import styles from './AssetComputeList.module.css'
|
||||
import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
|
||||
|
|
@ -24,22 +24,20 @@ export default function AssetComputeSelection({
|
|||
<Empty />
|
||||
) : (
|
||||
assets.map((asset: AssetSelectionAsset) => (
|
||||
<Link
|
||||
to={`/asset/${asset.did}`}
|
||||
className={styles.row}
|
||||
key={asset.did}
|
||||
>
|
||||
<div className={styles.info}>
|
||||
<h3 className={styles.title}>
|
||||
<Dotdotdot clamp={1} tagName="span">
|
||||
{asset.name}
|
||||
<Link href={`/asset/${asset.did}`} key={asset.did}>
|
||||
<a className={styles.row}>
|
||||
<div className={styles.info}>
|
||||
<h3 className={styles.title}>
|
||||
<Dotdotdot clamp={1} tagName="span">
|
||||
{asset.name}
|
||||
</Dotdotdot>
|
||||
</h3>
|
||||
<Dotdotdot clamp={1} tagName="code" className={styles.did}>
|
||||
{asset.symbol} | {asset.did}
|
||||
</Dotdotdot>
|
||||
</h3>
|
||||
<Dotdotdot clamp={1} tagName="code" className={styles.did}>
|
||||
{asset.symbol} | {asset.did}
|
||||
</Dotdotdot>
|
||||
</div>
|
||||
<PriceUnit price={asset.price} small className={styles.price} />
|
||||
</div>
|
||||
<PriceUnit price={asset.price} small className={styles.price} />
|
||||
</a>
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import React from 'react'
|
||||
import { Link } from 'gatsby'
|
||||
import Link from 'next/link'
|
||||
import Dotdotdot from 'react-dotdotdot'
|
||||
import Price from '../atoms/Price'
|
||||
import Price from '@shared/Price'
|
||||
import { DDO } from '@oceanprotocol/lib'
|
||||
import removeMarkdown from 'remove-markdown'
|
||||
import Publisher from '../atoms/Publisher'
|
||||
import AssetType from '../atoms/AssetType'
|
||||
import NetworkName from '../atoms/NetworkName'
|
||||
import Publisher from '@shared/Publisher'
|
||||
import AssetType from '@shared/AssetType'
|
||||
import NetworkName from '@shared/NetworkName'
|
||||
import styles from './AssetTeaser.module.css'
|
||||
|
||||
declare type AssetTeaserProps = {
|
||||
|
|
@ -29,38 +29,40 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
|
|||
|
||||
return (
|
||||
<article className={`${styles.teaser} ${styles[type]}`}>
|
||||
<Link to={`/asset/${ddo.id}`} className={styles.link}>
|
||||
<header className={styles.header}>
|
||||
<div className={styles.symbol}>{dataTokenInfo?.symbol}</div>
|
||||
<Dotdotdot clamp={3}>
|
||||
<h1 className={styles.title}>{name}</h1>
|
||||
</Dotdotdot>
|
||||
{!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
|
||||
) || ''
|
||||
<Link href={`/asset/${ddo.id}`}>
|
||||
<a className={styles.link}>
|
||||
<header className={styles.header}>
|
||||
<div className={styles.symbol}>{dataTokenInfo?.symbol}</div>
|
||||
<Dotdotdot clamp={3}>
|
||||
<h1 className={styles.title}>{name}</h1>
|
||||
</Dotdotdot>
|
||||
{!noPublisher && (
|
||||
<Publisher account={owner} minimal className={styles.publisher} />
|
||||
)}
|
||||
</Dotdotdot>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<footer className={styles.foot}>
|
||||
<Price price={price} small />
|
||||
<NetworkName networkId={ddo.chainId} className={styles.network} />
|
||||
</footer>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<footer className={styles.foot}>
|
||||
<Price price={price} small />
|
||||
<NetworkName networkId={ddo.chainId} className={styles.network} />
|
||||
</footer>
|
||||
</a>
|
||||
</Link>
|
||||
</article>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
import React, { ReactElement } from 'react'
|
||||
import styles from './index.module.css'
|
||||
import classNames from 'classnames/bind'
|
||||
<<<<<<< HEAD:src/components/@shared/AssetType/index.tsx
|
||||
import Compute from '@images/compute.svg'
|
||||
import Download from '@images/download.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)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,9 @@
|
|||
import React, { ReactElement, ReactNode, useEffect, useState } from 'react'
|
||||
<<<<<<< HEAD:src/components/@shared/ExplorerLink/index.tsx
|
||||
import External from '@images/external.svg'
|
||||
import classNames from 'classnames/bind'
|
||||
import { ConfigHelperConfig } from '@oceanprotocol/lib'
|
||||
import { useOcean } from '@context/Ocean'
|
||||
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'
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
|
|
|||
|
|
@ -3,13 +3,8 @@ import { File as FileMetadata } from '@oceanprotocol/lib'
|
|||
import filesize from 'filesize'
|
||||
import classNames from 'classnames/bind'
|
||||
import cleanupContentType from '@utils/cleanupContentType'
|
||||
<<<<<<< HEAD:src/components/@shared/FileIcon/index.tsx
|
||||
import styles from './index.module.css'
|
||||
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)
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default function AdvancedSettings(prop: {
|
|||
Advanced Settings
|
||||
</Button>
|
||||
{showAdvancedSettings &&
|
||||
prop.content.data.map(
|
||||
prop.content.fields.map(
|
||||
(field: FormFieldProps) =>
|
||||
field.advanced === true && (
|
||||
<Field
|
||||
|
|
|
|||
|
|
@ -2,29 +2,15 @@ import React, { ReactElement } from 'react'
|
|||
import { InputProps } from '@shared/Form/Input'
|
||||
import InputElement from '@shared/Form/Input/InputElement'
|
||||
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 {
|
||||
const data = useStaticQuery(query)
|
||||
const termsProps: InputProps = {
|
||||
...props,
|
||||
defaultChecked: props?.value?.toString() === 'true'
|
||||
defaultChecked: props.value.toString() === 'true'
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={styles.terms}
|
||||
dangerouslySetInnerHTML={{ __html: data.terms.html }}
|
||||
/>
|
||||
<InputElement {...termsProps} type="checkbox" />
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -7,14 +7,13 @@ import React, {
|
|||
useState
|
||||
} from 'react'
|
||||
import InputElement from './InputElement'
|
||||
import Help from './Help'
|
||||
import Label from './Label'
|
||||
import styles from './index.module.css'
|
||||
import { ErrorMessage, FieldInputProps } from 'formik'
|
||||
import classNames from 'classnames/bind'
|
||||
import Disclaimer from './Disclaimer'
|
||||
import Tooltip from '@shared/atoms/Tooltip'
|
||||
import Markdown from '@shared/atoms/Markdown'
|
||||
import Markdown from '@shared/Markdown'
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default function Page({
|
|||
<Container>
|
||||
{title && !noPageHeader && (
|
||||
<PageHeader
|
||||
title={title}
|
||||
title={<>{title}</>}
|
||||
description={description}
|
||||
center={headerCenter}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,9 @@
|
|||
import React, { useState, useEffect, ReactElement } from 'react'
|
||||
import ReactPaginate from 'react-paginate'
|
||||
<<<<<<< HEAD:src/components/@shared/Pagination/index.tsx
|
||||
import styles from './index.module.css'
|
||||
import { MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS } from '@utils/aquarius'
|
||||
import Arrow from '@images/arrow.svg'
|
||||
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({
|
||||
totalPages,
|
||||
|
|
|
|||
|
|
@ -4,11 +4,7 @@ import classNames from 'classnames/bind'
|
|||
import Conversion from './Conversion'
|
||||
import styles from './PriceUnit.module.css'
|
||||
import { useUserPreferences } from '@context/UserPreferences'
|
||||
<<<<<<< HEAD:src/components/@shared/Price/PriceUnit.tsx
|
||||
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)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
import React, { ReactElement } from 'react'
|
||||
<<<<<<< HEAD:src/components/@shared/Publisher/Add.tsx
|
||||
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'
|
||||
|
||||
export default function Add(): ReactElement {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,14 @@
|
|||
import React, { ReactElement, useEffect, useState } from 'react'
|
||||
import styles from './index.module.css'
|
||||
import classNames from 'classnames/bind'
|
||||
<<<<<<< HEAD:src/components/@shared/Publisher/index.tsx
|
||||
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 { accountTruncate } from '@utils/web3'
|
||||
import axios from 'axios'
|
||||
import Add from './Add'
|
||||
import { useWeb3 } from '@context/Web3'
|
||||
import { getEnsName } from '@utils/ens'
|
||||
<<<<<<< HEAD:src/components/@shared/Publisher/index.tsx
|
||||
import { useIsMounted } from '@hooks/useIsMounted'
|
||||
=======
|
||||
>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/Publisher/index.tsx
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,7 @@ import React, { ReactElement } from 'react'
|
|||
import Tooltip from '@shared/atoms/Tooltip'
|
||||
import Status from '@shared/atoms/Status'
|
||||
import { useGraphSyncStatus } from '@hooks/useGraphSyncStatus'
|
||||
<<<<<<< HEAD:src/components/@shared/SyncStatus/index.tsx
|
||||
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 {
|
||||
const { isGraphSynced, blockGraph, blockHead } = useGraphSyncStatus()
|
||||
|
|
|
|||
|
|
@ -1,79 +1,10 @@
|
|||
import React, { ReactElement, useCallback, useEffect, useState } from 'react'
|
||||
<<<<<<< HEAD:src/components/@shared/TokenApproval/index.tsx
|
||||
import { useOcean } from '@context/Ocean'
|
||||
import { useAsset } from '@context/Asset'
|
||||
import { useWeb3 } from '@context/Web3'
|
||||
import Decimal from 'decimal.js'
|
||||
import { getOceanConfig } from '@utils/ocean'
|
||||
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({
|
||||
actionButton,
|
||||
|
|
|
|||
|
|
@ -1,20 +1,12 @@
|
|||
import React, { ReactElement } from 'react'
|
||||
import { useWeb3 } from '@context/Web3'
|
||||
import { addCustomNetwork } from '@utils/web3'
|
||||
import Button from '@shared/atoms/Button'
|
||||
import styles from './index.module.css'
|
||||
import { addCustomNetwork } from '@utils/web3'
|
||||
import useNetworkMetadata, {
|
||||
getNetworkDataById,
|
||||
getNetworkDisplayName
|
||||
} 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'
|
||||
|
||||
export default function WalletNetworkSwitcher(): ReactElement {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,8 @@
|
|||
import React, { ReactElement, useEffect, useState } from 'react'
|
||||
import { useWeb3 } from '@context/Web3'
|
||||
import Status from '@shared/atoms/Status'
|
||||
<<<<<<< HEAD:src/components/@shared/Web3Feedback/index.tsx
|
||||
import styles from './index.module.css'
|
||||
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'
|
||||
|
||||
export declare type Web3Error = {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.app {
|
||||
height: 100%;
|
||||
background: url('../../../node_modules/@oceanprotocol/art/waves/waves.svg')
|
||||
no-repeat center 13.5rem;
|
||||
|
||||
/* sticky footer technique */
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,69 +1,50 @@
|
|||
import React, { ReactElement } from 'react'
|
||||
import { graphql, PageProps, useStaticQuery } from 'gatsby'
|
||||
import Alert from '@shared/atoms/Alert'
|
||||
import Footer from '../Footer/Footer'
|
||||
import Header from '../Header'
|
||||
import StylesGlobal from '../../stylesGlobal/StylesGlobal'
|
||||
import { useWeb3 } from '@context/Web3'
|
||||
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
||||
import { useAccountPurgatory } from '@hooks/useAccountPurgatory'
|
||||
import AnnouncementBanner from '@shared/AnnouncementBanner'
|
||||
import PrivacyPreferenceCenter from '../Privacy/PrivacyPreferenceCenter'
|
||||
import styles from './index.module.css'
|
||||
|
||||
const contentQuery = graphql`
|
||||
query AppQuery {
|
||||
purgatory: allFile(filter: { relativePath: { eq: "purgatory.json" } }) {
|
||||
edges {
|
||||
node {
|
||||
childContentJson {
|
||||
account {
|
||||
title
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
import { ToastContainer } from 'react-toastify'
|
||||
import { useRouter } from 'next/router'
|
||||
// import waves from '@oceanprotocol/art/waves/waves.png'
|
||||
import content from '../../../content/purgatory.json'
|
||||
|
||||
export default function App({
|
||||
children,
|
||||
...props
|
||||
children
|
||||
}: {
|
||||
children: ReactElement
|
||||
}): ReactElement {
|
||||
const data = useStaticQuery(contentQuery)
|
||||
const purgatory = data.purgatory.edges[0].node.childContentJson.account
|
||||
const router = useRouter()
|
||||
|
||||
const { warning, appConfig } = useSiteMetadata()
|
||||
const { accountId } = useWeb3()
|
||||
const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
|
||||
|
||||
return (
|
||||
<StylesGlobal>
|
||||
<div className={styles.app}>
|
||||
{(props as PageProps).uri === '/' && (
|
||||
<AnnouncementBanner text={warning.main} />
|
||||
)}
|
||||
<Header />
|
||||
<div className={styles.app}>
|
||||
{router.pathname === '/' && <AnnouncementBanner text={warning.main} />}
|
||||
<Header />
|
||||
|
||||
{isInPurgatory && (
|
||||
<Alert
|
||||
title={purgatory.title}
|
||||
badge={`Reason: ${purgatoryData?.reason}`}
|
||||
text={purgatory.description}
|
||||
state="error"
|
||||
/>
|
||||
)}
|
||||
<main className={styles.main}>{children}</main>
|
||||
<Footer />
|
||||
{isInPurgatory && (
|
||||
<Alert
|
||||
title={content.account.title}
|
||||
badge={`Reason: ${purgatoryData?.reason}`}
|
||||
text={content.account.description}
|
||||
state="error"
|
||||
/>
|
||||
)}
|
||||
<main className={styles.main}>{children}</main>
|
||||
<Footer />
|
||||
|
||||
{appConfig.privacyPreferenceCenter === 'true' && (
|
||||
<PrivacyPreferenceCenter style="small" />
|
||||
)}
|
||||
</div>
|
||||
</StylesGlobal>
|
||||
{appConfig.privacyPreferenceCenter === 'true' && (
|
||||
<PrivacyPreferenceCenter style="small" />
|
||||
)}
|
||||
|
||||
<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 Button from '@shared/atoms/Button'
|
||||
import styles from './AssetActionHistoryTable.module.css'
|
||||
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({
|
||||
title,
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ import { secondsToString } from '@utils/metadata'
|
|||
import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
|
||||
import AlgorithmDatasetsListForCompute from '../../AssetContent/AlgorithmDatasetsListForCompute'
|
||||
import { getPreviousOrders, getPrice } from '@utils/subgraph'
|
||||
import AssetActionHistoryTable from '@shared/AssetActionHistoryTable'
|
||||
import AssetActionHistoryTable from '../AssetActionHistoryTable'
|
||||
import ComputeJobs from '../../../Profile/History/ComputeJobs'
|
||||
import { useCancelToken } from '@hooks/useCancelToken'
|
||||
import { useIsMounted } from '@hooks/useIsMounted'
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import styles from './index.module.css'
|
|||
import { transformComputeFormToServiceComputePrivacy } from '@utils/compute'
|
||||
import { setMinterToDispenser, setMinterToPublisher } from '@utils/freePrice'
|
||||
import Web3Feedback from '@shared/Web3Feedback'
|
||||
import MetadataFeedback from '../../../Publish/MetadataFeedback'
|
||||
import { getInitialValues, validationSchema } from './_constants'
|
||||
import content from '../../../../../content/pages/editComputeDataset.json'
|
||||
|
||||
|
|
@ -106,19 +105,7 @@ export default function EditComputeDataset({
|
|||
>
|
||||
{({ values, isSubmitting }) =>
|
||||
isSubmitting || hasFeedback ? (
|
||||
<MetadataFeedback
|
||||
title="Updating Data Set"
|
||||
error={error}
|
||||
success={success}
|
||||
setError={setError}
|
||||
successAction={{
|
||||
name: content.form.successAction,
|
||||
onClick: async () => {
|
||||
await refreshDdo()
|
||||
setShowEdit(false)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div />
|
||||
) : (
|
||||
<>
|
||||
<p className={styles.description}>{content.description}</p>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@ import { Logger } from '@oceanprotocol/lib'
|
|||
import { useWeb3 } from '@context/Web3'
|
||||
import { useOcean } from '@context/Ocean'
|
||||
import { setMinterToDispenser, setMinterToPublisher } from '@utils/freePrice'
|
||||
import { MetadataPreview } from '../../../Publish/MetadataPreview'
|
||||
import MetadataFeedback from '../../../Publish/MetadataFeedback'
|
||||
import content from '../../../../../content/pages/edit.json'
|
||||
|
||||
export default function Edit({
|
||||
|
|
@ -139,19 +137,7 @@ export default function Edit({
|
|||
>
|
||||
{({ isSubmitting, values, initialValues }) =>
|
||||
isSubmitting || hasFeedback ? (
|
||||
<MetadataFeedback
|
||||
title="Updating Data Set"
|
||||
error={error}
|
||||
success={success}
|
||||
setError={setError}
|
||||
successAction={{
|
||||
name: content.form.successAction,
|
||||
onClick: async () => {
|
||||
await refreshDdo()
|
||||
setShowEdit(false)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div />
|
||||
) : (
|
||||
<>
|
||||
<p className={styles.description}>{content.description}</p>
|
||||
|
|
@ -166,7 +152,6 @@ export default function Edit({
|
|||
/> */}
|
||||
|
||||
<aside>
|
||||
{/* <MetadataPreview values={values} /> */}
|
||||
<Web3Feedback />
|
||||
</aside>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,14 +16,6 @@ import EditHistory from './EditHistory'
|
|||
import { useWeb3 } from '@context/Web3'
|
||||
import styles from './index.module.css'
|
||||
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'
|
||||
|
||||
export default function AssetContent(): ReactElement {
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import Label from '@shared/Form/Input/Label'
|
|||
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
||||
import FormHelp from '@shared/Form/Input/Help'
|
||||
import Tooltip from '@shared/atoms/Tooltip'
|
||||
import { ReactComponent as Caret } from '@images/caret.svg'
|
||||
import { ReactComponent as Network } from '@images/network.svg'
|
||||
import Caret from '@images/caret.svg'
|
||||
import Network from '@images/network.svg'
|
||||
import NetworksList from './NetworksList'
|
||||
import stylesIndex from '../index.module.css'
|
||||
import styles from './index.module.css'
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
import React, { ReactElement } from 'react'
|
||||
import Menu from './Menu'
|
||||
<<<<<<< HEAD:src/components/Header/index.tsx
|
||||
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 {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
import React, { ReactElement } from 'react'
|
||||
<<<<<<< HEAD:src/components/Profile/Header/NumberUnit.tsx
|
||||
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 styles from './NumberUnit.module.css'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { ReactElement } from 'react'
|
||||
import DebugOutput from '@shared/atoms/DebugOutput'
|
||||
import DebugOutput from '@shared/DebugOutput'
|
||||
import styles from './index.module.css'
|
||||
import { transformPublishFormToMetadata } from '@utils/metadata'
|
||||
// import { transformPublishFormToMetadata } from '@utils/metadata'
|
||||
import { FormPublishData } from './_types'
|
||||
|
||||
export default function Debug({
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
// import React, {
|
||||
// ReactElement,
|
||||
// useEffect,
|
||||
// useState,
|
||||
// FormEvent,
|
||||
// ChangeEvent
|
||||
// } from 'react'
|
||||
import React, {
|
||||
ReactElement,
|
||||
useEffect,
|
||||
useState,
|
||||
FormEvent,
|
||||
ChangeEvent
|
||||
} from 'react'
|
||||
// import { useStaticQuery, graphql } from 'gatsby'
|
||||
// import { useFormikContext, Field, Form, FormikContextType } from 'formik'
|
||||
// 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 Markdown from '@shared/Markdown'
|
||||
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 Button from '@shared/atoms/Button'
|
||||
import { transformTags } from '@utils/metadata'
|
||||
|
|
@ -11,7 +11,7 @@ import { useWeb3 } from '@context/Web3'
|
|||
import styles from './MetadataPreview.module.css'
|
||||
import Web3Feedback from '@shared/Web3Feedback'
|
||||
import { useAsset } from '@context/Asset'
|
||||
import { FormPublishData } from './_types'
|
||||
import { FormPublishData } from '../../_types'
|
||||
|
||||
function Description({ description }: { description: string }) {
|
||||
const [fullDescription, setFullDescription] = useState<boolean>(false)
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { ReactElement, useEffect } from 'react'
|
||||
import { useFormikContext } from 'formik'
|
||||
import { DDO } from '@oceanprotocol/lib'
|
||||
import { graphql, useStaticQuery } from 'gatsby'
|
||||
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
||||
import Tabs from '@shared/atoms/Tabs'
|
||||
import { isValidNumber } from '@utils/numbers'
|
||||
|
|
@ -10,57 +9,9 @@ import { FormPublishData } from '../../_types'
|
|||
import Dynamic from './Dynamic'
|
||||
import Fixed from './Fixed'
|
||||
import Free from './Free'
|
||||
import content from '../../../../../content/price.json'
|
||||
|
||||
const query = graphql`
|
||||
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
|
||||
|
||||
export default function PricingFields(): ReactElement {
|
||||
const { appConfig } = useSiteMetadata()
|
||||
|
||||
// Connect with main publish form
|
||||
|
|
@ -96,20 +47,20 @@ export default function Pricing(): ReactElement {
|
|||
const tabs = [
|
||||
appConfig.allowFixedPricing === 'true'
|
||||
? {
|
||||
title: content.fixed.title,
|
||||
content: <Fixed content={content.fixed} />
|
||||
title: content.create.fixed.title,
|
||||
content: <Fixed content={content.create.fixed} />
|
||||
}
|
||||
: undefined,
|
||||
appConfig.allowDynamicPricing === 'true'
|
||||
? {
|
||||
title: content.dynamic.title,
|
||||
content: <Dynamic content={content.dynamic} />
|
||||
title: content.create.dynamic.title,
|
||||
content: <Dynamic content={content.create.dynamic} />
|
||||
}
|
||||
: undefined,
|
||||
appConfig.allowFreePricing === 'true'
|
||||
? {
|
||||
title: content.free.title,
|
||||
content: <Free content={content.free} />
|
||||
title: content.create.free.title,
|
||||
content: <Free content={content.create.free} />
|
||||
}
|
||||
: 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, {
|
||||
ReactElement,
|
||||
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 React, { ReactElement, FormEvent } from 'react'
|
||||
import { useFormikContext, Form, FormikContextType } from 'formik'
|
||||
import FormActions from './FormActions'
|
||||
import AdvancedSettings from '@shared/Form/FormFields/AdvancedSettings'
|
||||
import { FormPublishData } from '../_types'
|
||||
import styles from './index.module.css'
|
||||
import { initialValues } from '../_constants'
|
||||
import Tabs from '@shared/atoms/Tabs'
|
||||
import Pricing from './Pricing'
|
||||
import PricingFields from './Pricing'
|
||||
import Debug from '../Debug'
|
||||
|
||||
const query = graphql`
|
||||
query {
|
||||
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 />
|
||||
}
|
||||
]
|
||||
import MetadataFields from './Metadata'
|
||||
import ServicesFields from './Services'
|
||||
import content from '../../../../content/publish/form.json'
|
||||
|
||||
export default function FormPublish(): ReactElement {
|
||||
const { content } = useStaticQuery(query)
|
||||
|
||||
const {
|
||||
setStatus,
|
||||
isValid,
|
||||
values,
|
||||
setErrors,
|
||||
setTouched,
|
||||
resetForm,
|
||||
validateField,
|
||||
setFieldValue
|
||||
}: FormikContextType<FormPublishData> = useFormikContext()
|
||||
|
||||
const [computeTypeSelected, setComputeTypeSelected] = useState<boolean>(false)
|
||||
const { isValid, values, resetForm }: FormikContextType<FormPublishData> =
|
||||
useFormikContext()
|
||||
|
||||
// reset form validation on every mount
|
||||
useEffect(() => {
|
||||
setErrors({})
|
||||
setTouched({})
|
||||
// useEffect(() => {
|
||||
// setErrors({})
|
||||
// setTouched({})
|
||||
|
||||
// setSubmitting(false)
|
||||
}, [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)
|
||||
}
|
||||
// // setSubmitting(false)
|
||||
// }, [setErrors, setTouched])
|
||||
|
||||
const resetFormAndClearStorage = (e: FormEvent<Element>) => {
|
||||
e.preventDefault()
|
||||
|
||||
resetForm({
|
||||
values: initialValues as FormPublishData,
|
||||
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 = [
|
||||
|
|
@ -171,11 +37,7 @@ export default function FormPublish(): ReactElement {
|
|||
title: content.metadata.title,
|
||||
content: (
|
||||
<>
|
||||
{getStepContentFields(content.metadata)}
|
||||
<AdvancedSettings
|
||||
content={content.metadata}
|
||||
handleFieldChange={handleFieldChange}
|
||||
/>
|
||||
<MetadataFields />
|
||||
<FormActions
|
||||
isValid={isValid}
|
||||
resetFormAndClearStorage={resetFormAndClearStorage}
|
||||
|
|
@ -187,11 +49,7 @@ export default function FormPublish(): ReactElement {
|
|||
title: content.services.title,
|
||||
content: (
|
||||
<>
|
||||
{getStepContentFields(content.services)}
|
||||
<AdvancedSettings
|
||||
content={content.services}
|
||||
handleFieldChange={handleFieldChange}
|
||||
/>
|
||||
<ServicesFields />
|
||||
<FormActions
|
||||
isValid={isValid}
|
||||
resetFormAndClearStorage={resetFormAndClearStorage}
|
||||
|
|
@ -203,7 +61,7 @@ export default function FormPublish(): ReactElement {
|
|||
title: content.pricing.title,
|
||||
content: (
|
||||
<>
|
||||
<Pricing />
|
||||
<PricingFields />
|
||||
<FormActions
|
||||
isValid={isValid}
|
||||
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 { useWeb3 } from '@context/Web3'
|
||||
import styles from './Title.module.css'
|
||||
|
||||
import { graphql, useStaticQuery } from 'gatsby'
|
||||
|
||||
const query = graphql`
|
||||
query {
|
||||
content: allFile(filter: { relativePath: { eq: "publish/index.json" } }) {
|
||||
edges {
|
||||
node {
|
||||
childPublishJson {
|
||||
title
|
||||
tooltipNetwork
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
import content from '../../../content/publish/index.json'
|
||||
|
||||
export default function Title(): ReactElement {
|
||||
const data = useStaticQuery(query)
|
||||
const content = data.content.edges[0].node.childPublishJson
|
||||
const { networkId } = useWeb3()
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, { ReactElement, useState, useEffect } from 'react'
|
||||
import Permission from '@shared/Permission'
|
||||
import { Formik, FormikState } from 'formik'
|
||||
import { usePublish } from '@hooks/usePublish'
|
||||
import { initialValues, validationSchema } from './_constants'
|
||||
|
|
@ -81,6 +80,10 @@ export default function PublishPage({
|
|||
// }
|
||||
// }
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title={<Title />} description={content.description} />
|
||||
|
||||
{isInPurgatory && purgatoryData ? null : (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,11 @@ import React, { ReactElement, useState } from 'react'
|
|||
import classNames from 'classnames/bind'
|
||||
import { addExistingParamsToUrl } from './utils'
|
||||
import Button from '@shared/atoms/Button'
|
||||
import styles from './Filters.module.css'
|
||||
import {
|
||||
FilterByAccessOptions,
|
||||
FilterByTypeOptions
|
||||
} from '../../@types/aquarius/SearchQuery'
|
||||
import router, { useRouter } from 'next/router'
|
||||
import { useRouter } from 'next/router'
|
||||
import styles from './Filters.module.css'
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
|
|
|||
|
|
@ -8,19 +8,10 @@ import UrqlProvider from '@context/UrqlProvider'
|
|||
import ConsentProvider from '@context/CookieConsent'
|
||||
import App from 'src/components/App'
|
||||
|
||||
<<<<<<< HEAD:src/pages/_app.tsx
|
||||
import '@oceanprotocol/typographies/css/ocean-typo.css'
|
||||
import '../stylesGlobal/styles.css'
|
||||
|
||||
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 (
|
||||
<Web3Provider>
|
||||
<UrqlProvider>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
|
|||
import Publish from '../components/Publish'
|
||||
import Page from '@shared/Page'
|
||||
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'
|
||||
|
||||
export default function PagePublish(): ReactElement {
|
||||
|
|
@ -10,9 +10,14 @@ export default function PagePublish(): ReactElement {
|
|||
|
||||
return (
|
||||
<OceanProvider>
|
||||
<Page title={title} description={description} uri={router.route}>
|
||||
<Page
|
||||
title={title}
|
||||
description={description}
|
||||
uri={router.route}
|
||||
noPageHeader
|
||||
>
|
||||
<Publish content={content} />
|
||||
</Page>
|
||||
</OceanProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user