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

restructure form, dial back on overwriting native Formik functionality

Browse Source
This commit is contained in:
Matthias Kretschmann 2021-10-25 14:26:00 +01:00
parent 99453623d2
commit f2b1a33261
Signed by: m
GPG Key ID: 606EEEF3C479A91F
49 changed files with 234 additions and 779 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
content/publish/form.json
View File

@ -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"
}
]
}
}

4
src/@context/UserPreferences.tsx
View File

@ -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 {

31
src/@hooks/useNetworkMetadata/index.ts
View File

@ -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 }
}

2
src/@hooks/useSiteMetadata/index.ts
View File

@ -9,4 +9,4 @@ export function useSiteMetadata(): UseSiteMetadata {
}
return siteMeta
}
}

5
src/components/@shared/AddToken/index.tsx
View File

@ -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)

6
src/components/@shared/AnnouncementBanner/index.tsx
View File

@ -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)

32
src/components/@shared/AssetList/AssetComputeList.tsx
View File

@ -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>
))
)}

72
src/components/@shared/AssetTeaser/AssetTeaser.tsx
View File

@ -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>
)

6
src/components/@shared/AssetType/index.tsx
View File

@ -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)

8
src/components/@shared/ExplorerLink/index.tsx
View File

@ -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)

5
src/components/@shared/FileIcon/index.tsx
View File

@ -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)

2
src/components/@shared/Form/FormFields/AdvancedSettings.tsx
View File

@ -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

16
src/components/@shared/Form/FormFields/Terms.tsx
View File

@ -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" />
</>
)

3
src/components/@shared/Form/Input/index.tsx
View File

@ -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)

2
src/components/@shared/Page/index.tsx
View File

@ -26,7 +26,7 @@ export default function Page({
<Container>
{title && !noPageHeader && (
<PageHeader
title={title}
title={<>{title}</>}
description={description}
center={headerCenter}
/>

14
src/components/@shared/Pagination/index.tsx
View File

@ -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
src/components/@shared/Price/PriceUnit.tsx
View File

@ -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)

4
src/components/@shared/Publisher/Add.tsx
View File

@ -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 {

7
src/components/@shared/Publisher/index.tsx
View File

@ -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)

4
src/components/@shared/SyncStatus/index.tsx
View File

@ -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()

69
src/components/@shared/TokenApproval/index.tsx
View File

@ -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,

10
src/components/@shared/WalletNetworkSwitcher/index.tsx
View File

@ -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 {

5
src/components/@shared/Web3Feedback/index.tsx
View File

@ -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
src/components/App/index.module.css
View File

@ -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;

69
src/components/App/index.tsx
View File

@ -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>
)
}

8
src/components/Asset/AssetActions/AssetActionHistoryTable.tsx
View File

@ -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,

2
src/components/Asset/AssetActions/Compute/index.tsx
View File

@ -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'

15
src/components/Asset/AssetActions/Edit/EditComputeDataset.tsx
View File

@ -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>

0
src/components/Asset/AssetActions/Edit/_types.ts
View File

17
src/components/Asset/AssetActions/Edit/index.tsx
View File

@ -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>

8
src/components/Asset/AssetContent/index.tsx
View File

@ -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 {

4
src/components/Header/UserPreferences/Networks/index.tsx
View File

@ -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'

4
src/components/Header/index.tsx
View File

@ -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 (

4
src/components/Profile/Header/NumberUnit.tsx
View File

@ -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'

4
src/components/Publish/Debug.tsx
View File

@ -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({

14
src/components/Publish/FormAlgoPublish.tsx
View File

@ -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
View 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}`}
/>
))}
</>
)
}

0
src/components/Publish/MetadataPreview.module.css → src/components/Publish/FormPublish/Preview/index.module.css
View File

4
src/components/Publish/MetadataPreview.tsx → src/components/Publish/FormPublish/Preview/index.tsx
View File

@ -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)

65
src/components/Publish/FormPublish/Pricing/index.tsx
View File

@ -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
View 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
}
/>
)
)}
</>
)
}

176
src/components/Publish/FormPublish/index.tsx
View File

@ -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}

43
src/components/Publish/MetadataFeedback.module.css
View File

@ -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;
}

94
src/components/Publish/MetadataFeedback.tsx
View File

@ -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>
)
}

20
src/components/Publish/Title.tsx
View File

@ -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 (

5
src/components/Publish/index.tsx
View File

@ -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}

3
src/components/Search/Filters.tsx
View File

@ -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)

9
src/pages/_app.tsx
View File

@ -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>

11
src/pages/publish.tsx
View File

@ -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>
)
}
}