diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/molecules/FormFields/Price/Dynamic.tsx index 8c2f26592..b779dc57b 100644 --- a/src/components/molecules/FormFields/Price/Dynamic.tsx +++ b/src/components/molecules/FormFields/Price/Dynamic.tsx @@ -4,7 +4,7 @@ import stylesIndex from './index.module.css' import styles from './Dynamic.module.css' import FormHelp from '../../../atoms/Input/Help' import Wallet from '../../Wallet' -import { useOcean } from '@oceanprotocol/react' +import { DataTokenOptions, PriceOptions, useOcean } from '@oceanprotocol/react' import Alert from '../../../atoms/Alert' import Coin from './Coin' import { isCorrectNetwork } from '../../../../utils/wallet' @@ -15,21 +15,20 @@ import Tooltip from '../../../atoms/Tooltip' export default function Dynamic({ ocean, - tokensToMint, - weightOnDataToken, - liquidityProviderFee, + priceOptions, + datatokenOptions, onOceanChange, content }: { ocean: string - tokensToMint: number - weightOnDataToken: string - liquidityProviderFee: string + priceOptions: PriceOptions + datatokenOptions: DataTokenOptions onOceanChange: (event: ChangeEvent) => void content: any }): ReactElement { const { appConfig } = useSiteMetadata() const { account, balance, chainId, refreshBalance } = useOcean() + const { weightOnDataToken, tokensToMint, liquidityProviderFee } = priceOptions const [error, setError] = useState() const correctNetwork = isCorrectNetwork(chainId) @@ -91,7 +90,7 @@ export default function Dynamic({ /> ) => void content: any }): ReactElement { @@ -22,7 +25,6 @@ export default function Fixed({
- - + {datatokenOptions?.symbol} | {datatokenOptions?.name}
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx index cec098495..dd4758258 100644 --- a/src/components/molecules/FormFields/Price/index.tsx +++ b/src/components/molecules/FormFields/Price/index.tsx @@ -7,6 +7,7 @@ import Fixed from './Fixed' import Dynamic from './Dynamic' import { useField } from 'formik' import { useUserPreferences } from '../../../../providers/UserPreferences' +import { DataTokenOptions, PriceOptions, useOcean } from '@oceanprotocol/react' const query = graphql` query PriceFieldQuery { @@ -39,15 +40,17 @@ export default function Price(props: InputProps): ReactElement { const { debug } = useUserPreferences() const data = useStaticQuery(query) const content = data.content.edges[0].node.childPagesJson.price + const { ocean } = useOcean() const [field, meta, helpers] = useField(props) - const { weightOnDataToken, liquidityProviderFee } = field.value + const priceOptions: PriceOptions = field.value - const [ocean, setOcean] = useState('1') + const [amountOcean, setAmountOcean] = useState('1') const [tokensToMint, setTokensToMint] = useState() + const [datatokenOptions, setDatatokenOptions] = useState() function handleOceanChange(event: ChangeEvent) { - setOcean(event.target.value) + setAmountOcean(event.target.value) } function handleTabChange(tabName: string) { @@ -55,11 +58,19 @@ export default function Price(props: InputProps): ReactElement { helpers.setValue({ ...field.value, type }) } - // Always update everything when ocean changes + // Always update everything when amountOcean changes useEffect(() => { - const tokensToMint = Number(ocean) * Number(weightOnDataToken) + const tokensToMint = + Number(amountOcean) * Number(priceOptions.weightOnDataToken) setTokensToMint(tokensToMint) helpers.setValue({ ...field.value, tokensToMint }) + }, [amountOcean]) + + // Generate new DT name & symbol + useEffect(() => { + if (!ocean) return + const newDatatokenOptions = ocean.datatokens.generateDtName() + setDatatokenOptions(newDatatokenOptions) }, [ocean]) const tabs = [ @@ -67,7 +78,8 @@ export default function Price(props: InputProps): ReactElement { title: content.fixed.title, content: ( @@ -77,11 +89,10 @@ export default function Price(props: InputProps): ReactElement { title: content.dynamic.title, content: ( ) diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index 52ef0080f..c833908ad 100644 --- a/src/components/pages/Publish/index.tsx +++ b/src/components/pages/Publish/index.tsx @@ -2,7 +2,12 @@ import React, { ReactElement } from 'react' import { useNavigate } from '@reach/router' import { toast } from 'react-toastify' import { Formik } from 'formik' -import { usePublish, useOcean, PriceOptions } from '@oceanprotocol/react' +import { + usePublish, + useOcean, + PriceOptions, + DataTokenOptions +} from '@oceanprotocol/react' import styles from './index.module.css' import PublishForm from './PublishForm' import Web3Feedback from '../../molecules/Wallet/Feedback' @@ -19,7 +24,8 @@ export default function PublishPage({ }: { content: { form: FormContent } }): ReactElement { - const { marketFeeAddress, marketFeeAmount } = useSiteMetadata() + // TODO: implement marketFee + // const { marketFeeAddress, marketFeeAmount } = useSiteMetadata() const { debug } = useUserPreferences() const { publish, publishError, isLoading, publishStepText } = usePublish() const navigate = useNavigate() @@ -31,15 +37,15 @@ export default function PublishPage({ const metadata = transformPublishFormToMetadata(values) const priceOptions = values.price const serviceType = values.access === 'Download' ? 'access' : 'compute' + let datatokenOptions: DataTokenOptions try { // mpAddress and mpFee are not yet implemented in ocean js so are not used const ddo = await publish( metadata as any, priceOptions, - serviceType - // marketFeeAddress, - // marketFeeAmount + serviceType, + datatokenOptions ) if (publishError) {