name refresh button

src/components/atoms/Button.tsx

@@ -19,6 +19,7 @@ interface ButtonProps {
   download?: boolean
   target?: string
   rel?: string
+  title?: string
 }
 
 export default function Button({

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

@@ -5,6 +5,7 @@ import InputElement from '../../../atoms/Input/InputElement'
 import { ReactComponent as Logo } from '../../../../images/logo.svg'
 import Conversion from '../../../atoms/Price/Conversion'
 import { DataTokenOptions } from '@oceanprotocol/react'
+import RefreshName from './RefreshName'
 
 export default function Coin({
   datatokenOptions,
@@ -12,6 +13,7 @@ export default function Coin({
   value,
   weight,
   onOceanChange,
+  generateName,
   readOnly
 }: {
   datatokenOptions: DataTokenOptions
@@ -19,6 +21,7 @@ export default function Coin({
   value: string
   weight: string
   onOceanChange?: (event: ChangeEvent<HTMLInputElement>) => void
+  generateName?: () => void
   readOnly?: boolean
 }): ReactElement {
   return (
@@ -29,6 +32,9 @@ export default function Coin({
 
       <h4 className={styles.tokenName}>
         {datatokenOptions?.name || 'Data Token'}
+        {datatokenOptions?.name && generateName && (
+          <RefreshName generateName={generateName} />
+        )}
       </h4>
 
       <div className={styles.data}>

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

@@ -17,12 +17,14 @@ export default function Dynamic({
   priceOptions,
   datatokenOptions,
   onOceanChange,
+  generateName,
   content
 }: {
   ocean: string
   priceOptions: PriceOptions
   datatokenOptions: DataTokenOptions
   onOceanChange: (event: ChangeEvent<HTMLInputElement>) => void
+  generateName: () => void
   content: any
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
@@ -91,6 +93,7 @@ export default function Dynamic({
           datatokenOptions={datatokenOptions}
           value={tokensToMint.toString()}
           weight={`${Number(weightOnDataToken) * 10}%`}
+          generateName={generateName}
           readOnly
         />
       </div>

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

@@ -6,16 +6,19 @@ import Label from '../../../atoms/Input/Label'
 import InputElement from '../../../atoms/Input/InputElement'
 import Conversion from '../../../atoms/Price/Conversion'
 import { DataTokenOptions } from '@oceanprotocol/react'
+import RefreshName from './RefreshName'
 
 export default function Fixed({
   ocean,
   datatokenOptions,
   onChange,
+  generateName,
   content
 }: {
   ocean: string
   datatokenOptions: DataTokenOptions
   onChange: (event: ChangeEvent<HTMLInputElement>) => void
+  generateName: () => void
   content: any
 }): ReactElement {
   return (
@@ -37,6 +40,7 @@ export default function Fixed({
         {datatokenOptions && (
           <div className={styles.datatoken}>
             <strong>Data Token</strong>
+            <RefreshName generateName={generateName} />
             <br />
             {datatokenOptions?.name} | {datatokenOptions?.symbol}
           </div>

src/components/molecules/FormFields/Price/RefreshName.module.css

@@ -0,0 +1,9 @@
+.refresh {
+  margin-left: calc(var(--spacer) / 4) !important;
+}
+
+.refresh svg {
+  fill: var(--brand-pink);
+  width: var(--font-size-mini);
+  height: var(--font-size-mini);
+}

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

@@ -0,0 +1,25 @@
+import React, { ReactElement } from 'react'
+import styles from './RefreshName.module.css'
+import Button from '../../../atoms/Button'
+import { ReactComponent as Refresh } from '../../../../images/refresh.svg'
+
+export default function RefreshName({
+  generateName
+}: {
+  generateName: () => void
+}): ReactElement {
+  return (
+    <Button
+      style="text"
+      size="small"
+      className={styles.refresh}
+      title="Generate new name & symbol"
+      onClick={(e) => {
+        e.preventDefault()
+        generateName()
+      }}
+    >
+      <Refresh />
+    </Button>
+  )
+}

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

@@ -58,6 +58,12 @@ export default function Price(props: InputProps): ReactElement {
     helpers.setValue({ ...field.value, type })
   }
 
+  function generateName() {
+    if (!ocean) return
+    const newDatatokenOptions = ocean.datatokens.generateDtName()
+    setDatatokenOptions(newDatatokenOptions)
+  }
+
   // Always update everything when amountOcean changes
   useEffect(() => {
     const tokensToMint =
@@ -68,9 +74,7 @@ export default function Price(props: InputProps): ReactElement {
 
   // Generate new DT name & symbol
   useEffect(() => {
-    if (!ocean) return
+    generateName()
-    const newDatatokenOptions = ocean.datatokens.generateDtName()
-    setDatatokenOptions(newDatatokenOptions)
   }, [ocean])
 
   const tabs = [
@@ -81,6 +85,7 @@ export default function Price(props: InputProps): ReactElement {
           ocean={amountOcean}
           datatokenOptions={datatokenOptions}
           onChange={handleOceanChange}
+          generateName={generateName}
           content={content.fixed}
         />
       )
@@ -93,6 +98,7 @@ export default function Price(props: InputProps): ReactElement {
           priceOptions={{ ...priceOptions, tokensToMint }}
           datatokenOptions={datatokenOptions}
           onOceanChange={handleOceanChange}
+          generateName={generateName}
           content={content.dynamic}
         />
       )

src/images/refresh.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16"  xmlns="http://www.w3.org/2000/svg">
+<path d="M13.64 2.35C12.19 0.9 10.2 0 7.99 0C3.57 0 0 3.58 0 8C0 12.42 3.57 16 7.99 16C11.72 16 14.83 13.45 15.72 10H13.64C12.82 12.33 10.6 14 7.99 14C4.68 14 1.99 11.31 1.99 8C1.99 4.69 4.68 2 7.99 2C9.65 2 11.13 2.69 12.21 3.78L8.99 7H15.99V0L13.64 2.35Z" />
+</svg>