handle generated dt names

* generate new name & symbol on mount
* output in fixed & dynamic
* pass through generated options into publish

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<HTMLInputElement>) => void
   content: any
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { account, balance, chainId, refreshBalance } = useOcean()
+  const { weightOnDataToken, tokensToMint, liquidityProviderFee } = priceOptions
 
   const [error, setError] = useState<string>()
   const correctNetwork = isCorrectNetwork(chainId)
@@ -91,7 +90,7 @@ export default function Dynamic({
           />
           <Coin
             name="tokensToMint"
-            symbol="OCEAN-CAV"
+            symbol={datatokenOptions.symbol}
             value={tokensToMint.toString()}
             weight={`${Number(weightOnDataToken) * 10}%`}
             readOnly

src/components/molecules/FormFields/Price/Fixed.tsx

@@ -5,13 +5,16 @@ import FormHelp from '../../../atoms/Input/Help'
 import Label from '../../../atoms/Input/Label'
 import InputElement from '../../../atoms/Input/InputElement'
 import Conversion from '../../../atoms/Price/Conversion'
+import { DataTokenOptions } from '@oceanprotocol/react'
 
 export default function Fixed({
   ocean,
+  datatokenOptions,
   onChange,
   content
 }: {
   ocean: string
+  datatokenOptions: DataTokenOptions
   onChange: (event: ChangeEvent<HTMLInputElement>) => void
   content: any
 }): ReactElement {
@@ -22,7 +25,6 @@ export default function Fixed({
 
         <div className={styles.form}>
           <Label htmlFor="ocean">Ocean Tokens</Label>
-
           <InputElement
             value={ocean}
             name="ocean"
@@ -30,8 +32,8 @@ export default function Fixed({
             prefix="OCEAN"
             onChange={onChange}
           />
-
           <Conversion price={ocean} className={stylesIndex.conversion} />
+          {datatokenOptions?.symbol} | {datatokenOptions?.name}
         </div>
       </div>
     </div>

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<number>()
+  const [datatokenOptions, setDatatokenOptions] = useState<DataTokenOptions>()
 
   function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
-    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: (
         <Fixed
-          ocean={ocean}
+          ocean={amountOcean}
+          datatokenOptions={datatokenOptions}
           onChange={handleOceanChange}
           content={content.fixed}
         />
@@ -77,11 +89,10 @@ export default function Price(props: InputProps): ReactElement {
       title: content.dynamic.title,
       content: (
         <Dynamic
-          ocean={ocean}
-          tokensToMint={tokensToMint}
-          weightOnDataToken={weightOnDataToken}
+          ocean={amountOcean}
+          priceOptions={{ ...priceOptions, tokensToMint }}
+          datatokenOptions={datatokenOptions}
           onOceanChange={handleOceanChange}
-          liquidityProviderFee={liquidityProviderFee}
           content={content.dynamic}
         />
       )

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