1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
* update contracts

* add version selector

* show banner on all pages

* show banner on all pages

* Announcement/warning messages cleanup

* new main announcement message
* contextual compute-to-data warnings in publish form & asset action

* copy update

* change hardcoded URLs

* change localStorage key

* to prevent user preferences clashes when switching between v3 & v4

* footer stats note changes

* move copy into content file
* mention external markets

* footer stats note copy changes

* modified pool widget footer

* take out pool reserve display
* style & spacing updates for fees

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
This commit is contained in:
mihaisc 2022-06-08 01:46:46 -07:00 committed by GitHub
parent 57477958ab
commit 6dfeead4fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 191 additions and 77 deletions

View File

@ -19,10 +19,10 @@ module.exports = {
// List of chainIds which metadata cache queries will return by default. // List of chainIds which metadata cache queries will return by default.
// This preselects the Chains user preferences. // This preselects the Chains user preferences.
chainIds: [3, 4, 80001, 1287], chainIds: [1, 137, 56, 246, 1285],
// List of all supported chainIds. Used to populate the Chains user preferences list. // List of all supported chainIds. Used to populate the Chains user preferences list.
chainIdsSupported: [3, 4, 80001, 1287], chainIdsSupported: [1, 137, 56, 246, 1285, 3, 4, 80001, 1287],
infuraProjectId: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID || 'xxx', infuraProjectId: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID || 'xxx',

View File

@ -12,5 +12,8 @@
"name": "Discord", "name": "Discord",
"url": "https://discord.gg/TnXjkR5" "url": "https://discord.gg/TnXjkR5"
} }
] ],
"stats": {
"note": "Counted on-chain from our NFT and pool factories. Includes assets in all Ocean Market forks and [purgatory](https://github.com/oceanprotocol/list-purgatory)."
}
} }

View File

@ -1,7 +1,7 @@
{ {
"siteTitle": "Ocean Market", "siteTitle": "Ocean Market",
"siteTagline": "A marketplace to find, publish and trade data sets in the Ocean Network.", "siteTagline": "A marketplace to find, publish and trade data sets in the Ocean Network.",
"siteUrl": "https://v4.market.oceanprotocol.com", "siteUrl": "https://market.oceanprotocol.com",
"siteImage": "/share.png", "siteImage": "/share.png",
"copyright": "All Rights Reserved. Powered by ", "copyright": "All Rights Reserved. Powered by ",
"menu": [ "menu": [
@ -14,12 +14,8 @@
"link": "/profile" "link": "/profile"
} }
], ],
"announcement": "Data NFTs, One-Sided Staking and more. [Explore OceanONDA V4](https://blog.oceanprotocol.com).",
"warning": { "warning": {
"main": "", "ctd": "Compute-to-Data is still in a testing phase, please use it only on test networks."
"polygonPublish": "Only republish data sets with a pool from ETH Mainnet into Polygon/Matic if the liquidity is **less than or equal to 1000 OCEAN in the original pool**. Doing otherwise will lead to [purgatory](https://github.com/oceanprotocol/list-purgatory) for the data set in Polygon/Matic."
},
"announcement": {
"main": "Ocean Market is [available on Polygon](https://blog.oceanprotocol.com/ocean-on-polygon-network-8abad19cbf47).",
"polygon": "Polygon/Matic EVM support is in early stages. [Use the Polygon Bridge](https://docs.oceanprotocol.com/tutorials/polygon-bridge/) to get mOCEAN."
} }
} }

30
package-lock.json generated
View File

@ -13,7 +13,7 @@
"@coingecko/cryptoformat": "^0.4.4", "@coingecko/cryptoformat": "^0.4.4",
"@loadable/component": "^5.15.2", "@loadable/component": "^5.15.2",
"@oceanprotocol/art": "^3.2.0", "@oceanprotocol/art": "^3.2.0",
"@oceanprotocol/lib": "^1.0.0-next.44", "@oceanprotocol/lib": "^1.0.0-next.45",
"@oceanprotocol/typographies": "^0.1.0", "@oceanprotocol/typographies": "^0.1.0",
"@portis/web3": "^4.0.7", "@portis/web3": "^4.0.7",
"@tippyjs/react": "^4.2.6", "@tippyjs/react": "^4.2.6",
@ -4518,16 +4518,16 @@
"integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA==" "integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA=="
}, },
"node_modules/@oceanprotocol/contracts": { "node_modules/@oceanprotocol/contracts": {
"version": "1.0.0-alpha.34", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.0.0-alpha.34.tgz", "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.0.0.tgz",
"integrity": "sha512-ZhNCakYbUpXrffpS98Hj0r5K70IzzTXNoYKBX4Ks3Qqc2T7mhXIxtakzygkM0lEk038ImWuzS2PAZKTATz+X2w==" "integrity": "sha512-rDCIooe1WHipLejuGhx2Wv/88SB7bWrN3+XHCWxXyPKTmmSQsgxKZPPzbIVBQ0ESChQZqGSBBJyqErqwwW4eBw=="
}, },
"node_modules/@oceanprotocol/lib": { "node_modules/@oceanprotocol/lib": {
"version": "1.0.0-next.44", "version": "1.0.0-next.45",
"resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.44.tgz", "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.45.tgz",
"integrity": "sha512-TXrHvY7+t7WSJXAVkSip0hp5byE8G4citJGirB5qJt34VGA+ujd+CoLU1bB/5gFSYH3eM56K4pcUPfCHZjeN3w==", "integrity": "sha512-WsSMZubvS5kVu4p6jQzxeENWitXok7M6yKjuHW0uhYJIYNx8JrZsCgYp9yz0p73a+bEQazSnr1nmvc1jVLU8jQ==",
"dependencies": { "dependencies": {
"@oceanprotocol/contracts": "^1.0.0-alpha.34", "@oceanprotocol/contracts": "^1.0.0",
"bignumber.js": "^9.0.2", "bignumber.js": "^9.0.2",
"cross-fetch": "^3.1.5", "cross-fetch": "^3.1.5",
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",
@ -44760,16 +44760,16 @@
"integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA==" "integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA=="
}, },
"@oceanprotocol/contracts": { "@oceanprotocol/contracts": {
"version": "1.0.0-alpha.34", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.0.0-alpha.34.tgz", "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.0.0.tgz",
"integrity": "sha512-ZhNCakYbUpXrffpS98Hj0r5K70IzzTXNoYKBX4Ks3Qqc2T7mhXIxtakzygkM0lEk038ImWuzS2PAZKTATz+X2w==" "integrity": "sha512-rDCIooe1WHipLejuGhx2Wv/88SB7bWrN3+XHCWxXyPKTmmSQsgxKZPPzbIVBQ0ESChQZqGSBBJyqErqwwW4eBw=="
}, },
"@oceanprotocol/lib": { "@oceanprotocol/lib": {
"version": "1.0.0-next.44", "version": "1.0.0-next.45",
"resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.44.tgz", "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.45.tgz",
"integrity": "sha512-TXrHvY7+t7WSJXAVkSip0hp5byE8G4citJGirB5qJt34VGA+ujd+CoLU1bB/5gFSYH3eM56K4pcUPfCHZjeN3w==", "integrity": "sha512-WsSMZubvS5kVu4p6jQzxeENWitXok7M6yKjuHW0uhYJIYNx8JrZsCgYp9yz0p73a+bEQazSnr1nmvc1jVLU8jQ==",
"requires": { "requires": {
"@oceanprotocol/contracts": "^1.0.0-alpha.34", "@oceanprotocol/contracts": "^1.0.0",
"bignumber.js": "^9.0.2", "bignumber.js": "^9.0.2",
"cross-fetch": "^3.1.5", "cross-fetch": "^3.1.5",
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",

View File

@ -25,7 +25,7 @@
"@coingecko/cryptoformat": "^0.4.4", "@coingecko/cryptoformat": "^0.4.4",
"@loadable/component": "^5.15.2", "@loadable/component": "^5.15.2",
"@oceanprotocol/art": "^3.2.0", "@oceanprotocol/art": "^3.2.0",
"@oceanprotocol/lib": "^1.0.0-next.44", "@oceanprotocol/lib": "^1.0.0-next.45",
"@oceanprotocol/typographies": "^0.1.0", "@oceanprotocol/typographies": "^0.1.0",
"@portis/web3": "^4.0.7", "@portis/web3": "^4.0.7",
"@tippyjs/react": "^4.2.6", "@tippyjs/react": "^4.2.6",

View File

@ -29,6 +29,8 @@ export interface AppConfig {
classNameLight: string classNameLight: string
storageKey: string storageKey: string
} }
v3MetadataCacheUri: string
v3MarketUri: string
} }
export interface SiteContent { export interface SiteContent {
siteTitle: string siteTitle: string
@ -40,13 +42,9 @@ export interface SiteContent {
name: string name: string
link: string link: string
}[] }[]
announcement: string
warning: { warning: {
main: string ctd: string
polygonPublish: string
}
announcement: {
main: string
polygon: string
} }
} }

View File

@ -31,7 +31,7 @@ interface UserPreferencesValue {
const UserPreferencesContext = createContext(null) const UserPreferencesContext = createContext(null)
const localStorageKey = 'ocean-user-preferences' const localStorageKey = 'ocean-user-preferences-v4'
function getLocalStorage(): UserPreferencesValue { function getLocalStorage(): UserPreferencesValue {
const storageParsed = const storageParsed =

View File

@ -1,11 +1,11 @@
import React, { ReactElement } from 'react' import React, { ReactElement, ReactNode } from 'react'
import styles from './index.module.css' import styles from './index.module.css'
import classNames from 'classnames/bind' import classNames from 'classnames/bind'
const cx = classNames.bind(styles) const cx = classNames.bind(styles)
export interface BadgeProps { export interface BadgeProps {
label: string label: string | ReactNode
className?: string className?: string
} }

View File

@ -8,8 +8,7 @@ import AnnouncementBanner from '@shared/AnnouncementBanner'
import PrivacyPreferenceCenter from '../Privacy/PrivacyPreferenceCenter' import PrivacyPreferenceCenter from '../Privacy/PrivacyPreferenceCenter'
import styles from './index.module.css' import styles from './index.module.css'
import { ToastContainer } from 'react-toastify' import { ToastContainer } from 'react-toastify'
import { useRouter } from 'next/router' import contentPurgatory from '../../../content/purgatory.json'
import content from '../../../content/purgatory.json'
import { useMarketMetadata } from '@context/MarketMetadata' import { useMarketMetadata } from '@context/MarketMetadata'
export default function App({ export default function App({
@ -17,24 +16,22 @@ export default function App({
}: { }: {
children: ReactElement children: ReactElement
}): ReactElement { }): ReactElement {
const router = useRouter()
const { siteContent, appConfig } = useMarketMetadata() const { siteContent, appConfig } = useMarketMetadata()
const { accountId } = useWeb3() const { accountId } = useWeb3()
const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId) const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
return ( return (
<div className={styles.app}> <div className={styles.app}>
{router.pathname === '/' && siteContent?.warning.main !== '' && ( {siteContent?.announcement !== '' && (
<AnnouncementBanner text={siteContent?.warning.main} /> <AnnouncementBanner text={siteContent?.announcement} />
)} )}
<Header /> <Header />
{isInPurgatory && ( {isInPurgatory && (
<Alert <Alert
title={content.account.title} title={contentPurgatory.account.title}
badge={`Reason: ${purgatoryData?.reason}`} badge={`Reason: ${purgatoryData?.reason}`}
text={content.account.description} text={contentPurgatory.account.description}
state="error" state="error"
/> />
)} )}

View File

@ -22,3 +22,7 @@
border-right: 0; border-right: 0;
padding: 0; padding: 0;
} }
.warning {
margin-bottom: var(--spacer);
}

View File

@ -11,6 +11,8 @@ import { useWeb3 } from '@context/Web3'
import content from '../../../../../content/pages/startComputeDataset.json' import content from '../../../../../content/pages/startComputeDataset.json'
import { Asset } from '@oceanprotocol/lib' import { Asset } from '@oceanprotocol/lib'
import { AccessDetails } from 'src/@types/Price' import { AccessDetails } from 'src/@types/Price'
import { useMarketMetadata } from '@context/MarketMetadata'
import Alert from '@shared/atoms/Alert'
export default function FormStartCompute({ export default function FormStartCompute({
algorithms, algorithms,
@ -61,6 +63,7 @@ export default function FormStartCompute({
isConsumable: boolean isConsumable: boolean
consumableFeedback: string consumableFeedback: string
}): ReactElement { }): ReactElement {
const { siteContent } = useMarketMetadata()
const { isValid, values }: FormikContextType<{ algorithm: string }> = const { isValid, values }: FormikContextType<{ algorithm: string }> =
useFormikContext() useFormikContext()
const { asset, isAssetNetwork } = useAsset() const { asset, isAssetNetwork } = useAsset()
@ -126,6 +129,11 @@ export default function FormStartCompute({
return ( return (
<Form className={styles.form}> <Form className={styles.form}>
<Alert
className={styles.warning}
state="info"
text={siteContent.warning.ctd}
/>
{content.form.data.map((field: FormFieldContent) => ( {content.form.data.map((field: FormFieldContent) => (
<Field <Field
key={field.name} key={field.name}

View File

@ -149,7 +149,7 @@ export default function Add({
/> />
</div> </div>
<Output newPoolTokens={newPoolTokens} newPoolShare={newPoolShare} /> {/* TODO: will be fixed in #1481 <Output newPoolTokens={newPoolTokens} newPoolShare={newPoolShare} /> */}
<Actions <Actions
isDisabled={!isValid || !values.amount || values.amount === 0} isDisabled={!isValid || !values.amount || values.amount === 0}

View File

@ -4,8 +4,8 @@
font-size: var(--font-size-mini); font-size: var(--font-size-mini);
color: var(--color-secondary); color: var(--color-secondary);
text-align: center; text-align: center;
padding-top: calc(var(--spacer) / 4); padding-top: calc(var(--spacer) / 2);
padding-bottom: calc(var(--spacer) / 3); padding-bottom: calc(var(--spacer) / 2);
} }
.update:before { .update:before {

View File

@ -18,3 +18,18 @@
margin-left: calc(var(--spacer) / 3); margin-left: calc(var(--spacer) / 3);
margin-right: calc(var(--spacer) / 3); margin-right: calc(var(--spacer) / 3);
} }
.fees {
border-top: none;
padding-top: 0;
margin-top: -0.5rem;
}
.fees > div {
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
text-align: center;
}
.fees figure {
display: none;
}

View File

@ -110,17 +110,9 @@ export default function PoolSections() {
titlePostfixTitle={`Weight of ${poolInfo?.weightBaseToken}% ${poolInfo?.baseTokenSymbol} & ${poolInfo?.weightDt}% ${poolInfo?.datatokenSymbol}`} titlePostfixTitle={`Weight of ${poolInfo?.weightBaseToken}% ${poolInfo?.baseTokenSymbol} & ${poolInfo?.weightDt}% ${poolInfo?.datatokenSymbol}`}
> >
<Graph /> <Graph />
<Token </PoolSection>
symbol={poolInfo?.baseTokenSymbol}
balance={`${poolData?.baseTokenLiquidity}`}
size="mini"
/>
<Token
symbol={poolInfo?.datatokenSymbol}
balance={`${poolData?.datatokenLiquidity}`}
size="mini"
/>
<PoolSection className={styles.fees}>
<Token <Token
symbol="% swap fee" symbol="% swap fee"
balance={poolInfo?.liquidityProviderSwapFee} balance={poolInfo?.liquidityProviderSwapFee}

View File

@ -4,6 +4,8 @@ import PriceUnit from '@shared/Price/PriceUnit'
import NetworkName from '@shared/NetworkName' import NetworkName from '@shared/NetworkName'
import styles from './Tooltip.module.css' import styles from './Tooltip.module.css'
import { StatsValue } from './_types' import { StatsValue } from './_types'
import content from '../../../../content/footer.json'
import Markdown from '@shared/Markdown'
export default function MarketStatsTooltip({ export default function MarketStatsTooltip({
totalValueLockedInOcean, totalValueLockedInOcean,
@ -39,13 +41,7 @@ export default function MarketStatsTooltip({
</li> </li>
))} ))}
</ul> </ul>
<p className={styles.note}> <Markdown className={styles.note} text={content.stats.note} />
Counted on-chain from our NFT and pool factories. Does not filter out
assets in{' '}
<a href="https://github.com/oceanprotocol/list-purgatory">
list-purgatory
</a>
</p>
</> </>
) )
} }

View File

@ -7,13 +7,24 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.logo { .logo,
order: 1; .badge {
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
}
.logo {
order: 0;
align-items: center; align-items: center;
} }
.badge {
cursor: pointer;
margin-top: -0.25rem;
position: relative;
padding: calc(var(--spacer) / 5) calc(var(--spacer) / 4);
}
.navigation { .navigation {
order: 3; order: 3;
margin-top: calc(var(--spacer) / 2); margin-top: calc(var(--spacer) / 2);
@ -60,10 +71,10 @@
.title { .title {
margin: 0; margin: 0;
margin-right: var(--spacer);
display: block; display: block;
color: var(--color-secondary); color: var(--color-secondary);
font-size: var(--font-size-h4); font-size: var(--font-size-h4);
margin-right: calc(var(--spacer) / 6);
} }
} }
@ -115,6 +126,10 @@
padding-right: 0; padding-right: 0;
} }
.link[aria-disabled] {
pointer-events: none;
}
.logo svg { .logo svg {
margin-right: calc(var(--spacer) / 3); margin-right: calc(var(--spacer) / 3);
} }
@ -122,3 +137,36 @@
.actions button { .actions button {
text-transform: none; text-transform: none;
} }
.tooltip[aria-expanded='true'] svg {
transform: rotate(180deg);
}
.caret,
svg.caret {
width: var(--font-size-mini);
height: var(--font-size-mini);
fill: var(--brand-white);
opacity: 0.7;
transition: transform 0.2s ease-out;
vertical-align: middle;
margin-left: calc(var(--spacer) / 12);
}
@media screen and (min-width: 42rem) {
.caret,
svg.caret {
display: inline-block;
}
}
.versions {
padding: calc(var(--spacer) / 4);
}
.versions .link {
display: inline-block;
margin: 0 calc(var(--spacer) / 4);
padding: 0;
font-size: var(--font-size-small);
}

View File

@ -9,7 +9,8 @@ import SearchBar from './SearchBar'
import styles from './Menu.module.css' import styles from './Menu.module.css'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useMarketMetadata } from '@context/MarketMetadata' import { useMarketMetadata } from '@context/MarketMetadata'
import Tooltip from '@shared/atoms/Tooltip'
import Caret from '@images/caret.svg'
const Wallet = loadable(() => import('./Wallet')) const Wallet = loadable(() => import('./Wallet'))
declare type MenuItem = { declare type MenuItem = {
@ -33,19 +34,41 @@ function MenuLink({ item }: { item: MenuItem }) {
} }
export default function Menu(): ReactElement { export default function Menu(): ReactElement {
const { siteContent } = useMarketMetadata() const { appConfig, siteContent } = useMarketMetadata()
return ( return (
<nav className={styles.menu}> <nav className={styles.menu}>
<Link href="/"> <Link href="/">
<a className={styles.logo}> <a className={styles.logo}>
<Logo noWordmark /> <Logo noWordmark />
<h1 className={styles.title}> <h1 className={styles.title}>{siteContent?.siteTitle}</h1>
{siteContent?.siteTitle} <Badge label="v4" />
</h1>
</a> </a>
</Link> </Link>
<Tooltip
className={styles.tooltip}
content={
<div className={styles.versions}>
<a className={styles.link} href={appConfig.v3MarketUri}>
v3
</a>
<a className={styles.link} href="" aria-current aria-disabled>
v4
</a>
</div>
}
trigger="click focus"
placement="bottom"
>
<Badge
className={styles.badge}
label={
<>
v4 <Caret aria-hidden="true" className={styles.caret} />
</>
}
/>
</Tooltip>
<ul className={styles.navigation}> <ul className={styles.navigation}>
{siteContent?.menu.map((item: MenuItem) => ( {siteContent?.menu.map((item: MenuItem) => (
<li key={item.name}> <li key={item.name}>

View File

@ -4,3 +4,7 @@
margin-left: 1.75rem; margin-left: 1.75rem;
top: -3.2rem; top: -3.2rem;
} }
.fieldWarning {
composes: fieldWarning from '../index.module.css';
}

View File

@ -9,6 +9,8 @@ import IconDataset from '@images/dataset.svg'
import IconAlgorithm from '@images/algorithm.svg' import IconAlgorithm from '@images/algorithm.svg'
import styles from './index.module.css' import styles from './index.module.css'
import { algorithmContainerPresets } from '../_constants' import { algorithmContainerPresets } from '../_constants'
import Alert from '@shared/atoms/Alert'
import { useMarketMetadata } from '@context/MarketMetadata'
const assetTypeOptionsTitles = getFieldContent( const assetTypeOptionsTitles = getFieldContent(
'type', 'type',
@ -16,6 +18,8 @@ const assetTypeOptionsTitles = getFieldContent(
).options ).options
export default function MetadataFields(): ReactElement { export default function MetadataFields(): ReactElement {
const { siteContent } = useMarketMetadata()
// connect with Form state, use for conditional field rendering // connect with Form state, use for conditional field rendering
const { values, setFieldValue } = useFormikContext<FormPublishData>() const { values, setFieldValue } = useFormikContext<FormPublishData>()
@ -71,6 +75,13 @@ export default function MetadataFields(): ReactElement {
name="metadata.type" name="metadata.type"
options={assetTypeOptions} options={assetTypeOptions}
/> />
{values.services[0].access === 'compute' && (
<Alert
className={styles.fieldWarning}
state="info"
text={siteContent.warning.ctd}
/>
)}
<Field <Field
{...getFieldContent('name', content.metadata.fields)} {...getFieldContent('name', content.metadata.fields)}
component={Input} component={Input}

View File

@ -6,6 +6,9 @@ import IconCompute from '@images/compute.svg'
import content from '../../../../content/publish/form.json' import content from '../../../../content/publish/form.json'
import { getFieldContent } from '../_utils' import { getFieldContent } from '../_utils'
import { FormPublishData } from '../_types' import { FormPublishData } from '../_types'
import Alert from '@shared/atoms/Alert'
import { useMarketMetadata } from '@context/MarketMetadata'
import styles from '../index.module.css'
const accessTypeOptionsTitles = getFieldContent( const accessTypeOptionsTitles = getFieldContent(
'access', 'access',
@ -13,6 +16,8 @@ const accessTypeOptionsTitles = getFieldContent(
).options ).options
export default function ServicesFields(): ReactElement { export default function ServicesFields(): ReactElement {
const { siteContent } = useMarketMetadata()
// connect with Form state, use for conditional field rendering // connect with Form state, use for conditional field rendering
const { values, setFieldValue } = useFormikContext<FormPublishData>() const { values, setFieldValue } = useFormikContext<FormPublishData>()
@ -67,12 +72,21 @@ export default function ServicesFields(): ReactElement {
name="services[0].algorithmPrivacy" name="services[0].algorithmPrivacy"
/> />
) : ( ) : (
<>
<Field <Field
{...getFieldContent('access', content.services.fields)} {...getFieldContent('access', content.services.fields)}
component={Input} component={Input}
name="services[0].access" name="services[0].access"
options={accessTypeOptions} options={accessTypeOptions}
/> />
{values.services[0].access === 'compute' && (
<Alert
className={styles.fieldWarning}
state="info"
text={siteContent.warning.ctd}
/>
)}
</>
)} )}
<Field <Field
{...getFieldContent('providerUrl', content.services.fields)} {...getFieldContent('providerUrl', content.services.fields)}

View File

@ -16,3 +16,8 @@
padding-right: calc(var(--spacer) * 4); padding-right: calc(var(--spacer) * 4);
} }
} }
.fieldWarning {
margin-top: -2rem;
margin-bottom: var(--spacer);
}