mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
Release (#1492)
* 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
GitHub
parent
57477958ab
commit
6dfeead4fd
@ -19,10 +19,10 @@ module.exports = {
|
||||
|
||||
// List of chainIds which metadata cache queries will return by default.
|
||||
// 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.
|
||||
chainIdsSupported: [3, 4, 80001, 1287],
|
||||
chainIdsSupported: [1, 137, 56, 246, 1285, 3, 4, 80001, 1287],
|
||||
|
||||
infuraProjectId: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID || 'xxx',
|
||||
|
||||
|
||||
@ -12,5 +12,8 @@
|
||||
"name": "Discord",
|
||||
"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)."
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"siteTitle": "Ocean Market",
|
||||
"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",
|
||||
"copyright": "All Rights Reserved. Powered by ",
|
||||
"menu": [
|
||||
@ -14,12 +14,8 @@
|
||||
"link": "/profile"
|
||||
}
|
||||
],
|
||||
"announcement": "Data NFTs, One-Sided Staking and more. [Explore OceanONDA V4](https://blog.oceanprotocol.com).",
|
||||
"warning": {
|
||||
"main": "",
|
||||
"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."
|
||||
"ctd": "Compute-to-Data is still in a testing phase, please use it only on test networks."
|
||||
}
|
||||
}
|
||||
|
||||
30
package-lock.json
generated
30
package-lock.json
generated
@ -13,7 +13,7 @@
|
||||
"@coingecko/cryptoformat": "^0.4.4",
|
||||
"@loadable/component": "^5.15.2",
|
||||
"@oceanprotocol/art": "^3.2.0",
|
||||
"@oceanprotocol/lib": "^1.0.0-next.44",
|
||||
"@oceanprotocol/lib": "^1.0.0-next.45",
|
||||
"@oceanprotocol/typographies": "^0.1.0",
|
||||
"@portis/web3": "^4.0.7",
|
||||
"@tippyjs/react": "^4.2.6",
|
||||
@ -4518,16 +4518,16 @@
|
||||
"integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA=="
|
||||
},
|
||||
"node_modules/@oceanprotocol/contracts": {
|
||||
"version": "1.0.0-alpha.34",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.0.0-alpha.34.tgz",
|
||||
"integrity": "sha512-ZhNCakYbUpXrffpS98Hj0r5K70IzzTXNoYKBX4Ks3Qqc2T7mhXIxtakzygkM0lEk038ImWuzS2PAZKTATz+X2w=="
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.0.0.tgz",
|
||||
"integrity": "sha512-rDCIooe1WHipLejuGhx2Wv/88SB7bWrN3+XHCWxXyPKTmmSQsgxKZPPzbIVBQ0ESChQZqGSBBJyqErqwwW4eBw=="
|
||||
},
|
||||
"node_modules/@oceanprotocol/lib": {
|
||||
"version": "1.0.0-next.44",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.44.tgz",
|
||||
"integrity": "sha512-TXrHvY7+t7WSJXAVkSip0hp5byE8G4citJGirB5qJt34VGA+ujd+CoLU1bB/5gFSYH3eM56K4pcUPfCHZjeN3w==",
|
||||
"version": "1.0.0-next.45",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.45.tgz",
|
||||
"integrity": "sha512-WsSMZubvS5kVu4p6jQzxeENWitXok7M6yKjuHW0uhYJIYNx8JrZsCgYp9yz0p73a+bEQazSnr1nmvc1jVLU8jQ==",
|
||||
"dependencies": {
|
||||
"@oceanprotocol/contracts": "^1.0.0-alpha.34",
|
||||
"@oceanprotocol/contracts": "^1.0.0",
|
||||
"bignumber.js": "^9.0.2",
|
||||
"cross-fetch": "^3.1.5",
|
||||
"crypto-js": "^4.1.1",
|
||||
@ -44760,16 +44760,16 @@
|
||||
"integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA=="
|
||||
},
|
||||
"@oceanprotocol/contracts": {
|
||||
"version": "1.0.0-alpha.34",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.0.0-alpha.34.tgz",
|
||||
"integrity": "sha512-ZhNCakYbUpXrffpS98Hj0r5K70IzzTXNoYKBX4Ks3Qqc2T7mhXIxtakzygkM0lEk038ImWuzS2PAZKTATz+X2w=="
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.0.0.tgz",
|
||||
"integrity": "sha512-rDCIooe1WHipLejuGhx2Wv/88SB7bWrN3+XHCWxXyPKTmmSQsgxKZPPzbIVBQ0ESChQZqGSBBJyqErqwwW4eBw=="
|
||||
},
|
||||
"@oceanprotocol/lib": {
|
||||
"version": "1.0.0-next.44",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.44.tgz",
|
||||
"integrity": "sha512-TXrHvY7+t7WSJXAVkSip0hp5byE8G4citJGirB5qJt34VGA+ujd+CoLU1bB/5gFSYH3eM56K4pcUPfCHZjeN3w==",
|
||||
"version": "1.0.0-next.45",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.45.tgz",
|
||||
"integrity": "sha512-WsSMZubvS5kVu4p6jQzxeENWitXok7M6yKjuHW0uhYJIYNx8JrZsCgYp9yz0p73a+bEQazSnr1nmvc1jVLU8jQ==",
|
||||
"requires": {
|
||||
"@oceanprotocol/contracts": "^1.0.0-alpha.34",
|
||||
"@oceanprotocol/contracts": "^1.0.0",
|
||||
"bignumber.js": "^9.0.2",
|
||||
"cross-fetch": "^3.1.5",
|
||||
"crypto-js": "^4.1.1",
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
"@coingecko/cryptoformat": "^0.4.4",
|
||||
"@loadable/component": "^5.15.2",
|
||||
"@oceanprotocol/art": "^3.2.0",
|
||||
"@oceanprotocol/lib": "^1.0.0-next.44",
|
||||
"@oceanprotocol/lib": "^1.0.0-next.45",
|
||||
"@oceanprotocol/typographies": "^0.1.0",
|
||||
"@portis/web3": "^4.0.7",
|
||||
"@tippyjs/react": "^4.2.6",
|
||||
|
||||
@ -29,6 +29,8 @@ export interface AppConfig {
|
||||
classNameLight: string
|
||||
storageKey: string
|
||||
}
|
||||
v3MetadataCacheUri: string
|
||||
v3MarketUri: string
|
||||
}
|
||||
export interface SiteContent {
|
||||
siteTitle: string
|
||||
@ -40,13 +42,9 @@ export interface SiteContent {
|
||||
name: string
|
||||
link: string
|
||||
}[]
|
||||
announcement: string
|
||||
warning: {
|
||||
main: string
|
||||
polygonPublish: string
|
||||
}
|
||||
announcement: {
|
||||
main: string
|
||||
polygon: string
|
||||
ctd: string
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ interface UserPreferencesValue {
|
||||
|
||||
const UserPreferencesContext = createContext(null)
|
||||
|
||||
const localStorageKey = 'ocean-user-preferences'
|
||||
const localStorageKey = 'ocean-user-preferences-v4'
|
||||
|
||||
function getLocalStorage(): UserPreferencesValue {
|
||||
const storageParsed =
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React, { ReactElement } from 'react'
|
||||
import React, { ReactElement, ReactNode } from 'react'
|
||||
import styles from './index.module.css'
|
||||
import classNames from 'classnames/bind'
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
export interface BadgeProps {
|
||||
label: string
|
||||
label: string | ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
|
||||
@ -8,8 +8,7 @@ import AnnouncementBanner from '@shared/AnnouncementBanner'
|
||||
import PrivacyPreferenceCenter from '../Privacy/PrivacyPreferenceCenter'
|
||||
import styles from './index.module.css'
|
||||
import { ToastContainer } from 'react-toastify'
|
||||
import { useRouter } from 'next/router'
|
||||
import content from '../../../content/purgatory.json'
|
||||
import contentPurgatory from '../../../content/purgatory.json'
|
||||
import { useMarketMetadata } from '@context/MarketMetadata'
|
||||
|
||||
export default function App({
|
||||
@ -17,24 +16,22 @@ export default function App({
|
||||
}: {
|
||||
children: ReactElement
|
||||
}): ReactElement {
|
||||
const router = useRouter()
|
||||
|
||||
const { siteContent, appConfig } = useMarketMetadata()
|
||||
const { accountId } = useWeb3()
|
||||
const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
|
||||
|
||||
return (
|
||||
<div className={styles.app}>
|
||||
{router.pathname === '/' && siteContent?.warning.main !== '' && (
|
||||
<AnnouncementBanner text={siteContent?.warning.main} />
|
||||
{siteContent?.announcement !== '' && (
|
||||
<AnnouncementBanner text={siteContent?.announcement} />
|
||||
)}
|
||||
<Header />
|
||||
|
||||
{isInPurgatory && (
|
||||
<Alert
|
||||
title={content.account.title}
|
||||
title={contentPurgatory.account.title}
|
||||
badge={`Reason: ${purgatoryData?.reason}`}
|
||||
text={content.account.description}
|
||||
text={contentPurgatory.account.description}
|
||||
state="error"
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -22,3 +22,7 @@
|
||||
border-right: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.warning {
|
||||
margin-bottom: var(--spacer);
|
||||
}
|
||||
|
||||
@ -11,6 +11,8 @@ import { useWeb3 } from '@context/Web3'
|
||||
import content from '../../../../../content/pages/startComputeDataset.json'
|
||||
import { Asset } from '@oceanprotocol/lib'
|
||||
import { AccessDetails } from 'src/@types/Price'
|
||||
import { useMarketMetadata } from '@context/MarketMetadata'
|
||||
import Alert from '@shared/atoms/Alert'
|
||||
|
||||
export default function FormStartCompute({
|
||||
algorithms,
|
||||
@ -61,6 +63,7 @@ export default function FormStartCompute({
|
||||
isConsumable: boolean
|
||||
consumableFeedback: string
|
||||
}): ReactElement {
|
||||
const { siteContent } = useMarketMetadata()
|
||||
const { isValid, values }: FormikContextType<{ algorithm: string }> =
|
||||
useFormikContext()
|
||||
const { asset, isAssetNetwork } = useAsset()
|
||||
@ -126,6 +129,11 @@ export default function FormStartCompute({
|
||||
|
||||
return (
|
||||
<Form className={styles.form}>
|
||||
<Alert
|
||||
className={styles.warning}
|
||||
state="info"
|
||||
text={siteContent.warning.ctd}
|
||||
/>
|
||||
{content.form.data.map((field: FormFieldContent) => (
|
||||
<Field
|
||||
key={field.name}
|
||||
|
||||
@ -149,7 +149,7 @@ export default function Add({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Output newPoolTokens={newPoolTokens} newPoolShare={newPoolShare} />
|
||||
{/* TODO: will be fixed in #1481 <Output newPoolTokens={newPoolTokens} newPoolShare={newPoolShare} /> */}
|
||||
|
||||
<Actions
|
||||
isDisabled={!isValid || !values.amount || values.amount === 0}
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
font-size: var(--font-size-mini);
|
||||
color: var(--color-secondary);
|
||||
text-align: center;
|
||||
padding-top: calc(var(--spacer) / 4);
|
||||
padding-bottom: calc(var(--spacer) / 3);
|
||||
padding-top: calc(var(--spacer) / 2);
|
||||
padding-bottom: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
||||
.update:before {
|
||||
|
||||
@ -18,3 +18,18 @@
|
||||
margin-left: 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;
|
||||
}
|
||||
|
||||
@ -110,17 +110,9 @@ export default function PoolSections() {
|
||||
titlePostfixTitle={`Weight of ${poolInfo?.weightBaseToken}% ${poolInfo?.baseTokenSymbol} & ${poolInfo?.weightDt}% ${poolInfo?.datatokenSymbol}`}
|
||||
>
|
||||
<Graph />
|
||||
<Token
|
||||
symbol={poolInfo?.baseTokenSymbol}
|
||||
balance={`${poolData?.baseTokenLiquidity}`}
|
||||
size="mini"
|
||||
/>
|
||||
<Token
|
||||
symbol={poolInfo?.datatokenSymbol}
|
||||
balance={`${poolData?.datatokenLiquidity}`}
|
||||
size="mini"
|
||||
/>
|
||||
</PoolSection>
|
||||
|
||||
<PoolSection className={styles.fees}>
|
||||
<Token
|
||||
symbol="% swap fee"
|
||||
balance={poolInfo?.liquidityProviderSwapFee}
|
||||
|
||||
@ -4,6 +4,8 @@ import PriceUnit from '@shared/Price/PriceUnit'
|
||||
import NetworkName from '@shared/NetworkName'
|
||||
import styles from './Tooltip.module.css'
|
||||
import { StatsValue } from './_types'
|
||||
import content from '../../../../content/footer.json'
|
||||
import Markdown from '@shared/Markdown'
|
||||
|
||||
export default function MarketStatsTooltip({
|
||||
totalValueLockedInOcean,
|
||||
@ -39,13 +41,7 @@ export default function MarketStatsTooltip({
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className={styles.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>
|
||||
<Markdown className={styles.note} text={content.stats.note} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -7,13 +7,24 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.logo {
|
||||
order: 1;
|
||||
.logo,
|
||||
.badge {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.logo {
|
||||
order: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
cursor: pointer;
|
||||
margin-top: -0.25rem;
|
||||
position: relative;
|
||||
padding: calc(var(--spacer) / 5) calc(var(--spacer) / 4);
|
||||
}
|
||||
|
||||
.navigation {
|
||||
order: 3;
|
||||
margin-top: calc(var(--spacer) / 2);
|
||||
@ -60,10 +71,10 @@
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
margin-right: var(--spacer);
|
||||
display: block;
|
||||
color: var(--color-secondary);
|
||||
font-size: var(--font-size-h4);
|
||||
margin-right: calc(var(--spacer) / 6);
|
||||
}
|
||||
}
|
||||
|
||||
@ -115,6 +126,10 @@
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.link[aria-disabled] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.logo svg {
|
||||
margin-right: calc(var(--spacer) / 3);
|
||||
}
|
||||
@ -122,3 +137,36 @@
|
||||
.actions button {
|
||||
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);
|
||||
}
|
||||
|
||||
@ -9,7 +9,8 @@ import SearchBar from './SearchBar'
|
||||
import styles from './Menu.module.css'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useMarketMetadata } from '@context/MarketMetadata'
|
||||
|
||||
import Tooltip from '@shared/atoms/Tooltip'
|
||||
import Caret from '@images/caret.svg'
|
||||
const Wallet = loadable(() => import('./Wallet'))
|
||||
|
||||
declare type MenuItem = {
|
||||
@ -33,19 +34,41 @@ function MenuLink({ item }: { item: MenuItem }) {
|
||||
}
|
||||
|
||||
export default function Menu(): ReactElement {
|
||||
const { siteContent } = useMarketMetadata()
|
||||
const { appConfig, siteContent } = useMarketMetadata()
|
||||
|
||||
return (
|
||||
<nav className={styles.menu}>
|
||||
<Link href="/">
|
||||
<a className={styles.logo}>
|
||||
<Logo noWordmark />
|
||||
<h1 className={styles.title}>
|
||||
{siteContent?.siteTitle} <Badge label="v4" />
|
||||
</h1>
|
||||
<h1 className={styles.title}>{siteContent?.siteTitle}</h1>
|
||||
</a>
|
||||
</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}>
|
||||
{siteContent?.menu.map((item: MenuItem) => (
|
||||
<li key={item.name}>
|
||||
|
||||
@ -4,3 +4,7 @@
|
||||
margin-left: 1.75rem;
|
||||
top: -3.2rem;
|
||||
}
|
||||
|
||||
.fieldWarning {
|
||||
composes: fieldWarning from '../index.module.css';
|
||||
}
|
||||
|
||||
@ -9,6 +9,8 @@ import IconDataset from '@images/dataset.svg'
|
||||
import IconAlgorithm from '@images/algorithm.svg'
|
||||
import styles from './index.module.css'
|
||||
import { algorithmContainerPresets } from '../_constants'
|
||||
import Alert from '@shared/atoms/Alert'
|
||||
import { useMarketMetadata } from '@context/MarketMetadata'
|
||||
|
||||
const assetTypeOptionsTitles = getFieldContent(
|
||||
'type',
|
||||
@ -16,6 +18,8 @@ const assetTypeOptionsTitles = getFieldContent(
|
||||
).options
|
||||
|
||||
export default function MetadataFields(): ReactElement {
|
||||
const { siteContent } = useMarketMetadata()
|
||||
|
||||
// connect with Form state, use for conditional field rendering
|
||||
const { values, setFieldValue } = useFormikContext<FormPublishData>()
|
||||
|
||||
@ -71,6 +75,13 @@ export default function MetadataFields(): ReactElement {
|
||||
name="metadata.type"
|
||||
options={assetTypeOptions}
|
||||
/>
|
||||
{values.services[0].access === 'compute' && (
|
||||
<Alert
|
||||
className={styles.fieldWarning}
|
||||
state="info"
|
||||
text={siteContent.warning.ctd}
|
||||
/>
|
||||
)}
|
||||
<Field
|
||||
{...getFieldContent('name', content.metadata.fields)}
|
||||
component={Input}
|
||||
|
||||
@ -6,6 +6,9 @@ import IconCompute from '@images/compute.svg'
|
||||
import content from '../../../../content/publish/form.json'
|
||||
import { getFieldContent } from '../_utils'
|
||||
import { FormPublishData } from '../_types'
|
||||
import Alert from '@shared/atoms/Alert'
|
||||
import { useMarketMetadata } from '@context/MarketMetadata'
|
||||
import styles from '../index.module.css'
|
||||
|
||||
const accessTypeOptionsTitles = getFieldContent(
|
||||
'access',
|
||||
@ -13,6 +16,8 @@ const accessTypeOptionsTitles = getFieldContent(
|
||||
).options
|
||||
|
||||
export default function ServicesFields(): ReactElement {
|
||||
const { siteContent } = useMarketMetadata()
|
||||
|
||||
// connect with Form state, use for conditional field rendering
|
||||
const { values, setFieldValue } = useFormikContext<FormPublishData>()
|
||||
|
||||
@ -67,12 +72,21 @@ export default function ServicesFields(): ReactElement {
|
||||
name="services[0].algorithmPrivacy"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Field
|
||||
{...getFieldContent('access', content.services.fields)}
|
||||
component={Input}
|
||||
name="services[0].access"
|
||||
options={accessTypeOptions}
|
||||
/>
|
||||
{values.services[0].access === 'compute' && (
|
||||
<Alert
|
||||
className={styles.fieldWarning}
|
||||
state="info"
|
||||
text={siteContent.warning.ctd}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<Field
|
||||
{...getFieldContent('providerUrl', content.services.fields)}
|
||||
|
||||
@ -16,3 +16,8 @@
|
||||
padding-right: calc(var(--spacer) * 4);
|
||||
}
|
||||
}
|
||||
|
||||
.fieldWarning {
|
||||
margin-top: -2rem;
|
||||
margin-bottom: var(--spacer);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user