make liquidityProviderFee editable

src/components/atoms/Input/index.tsx

@@ -30,6 +30,7 @@ export interface InputProps {
   multiple?: boolean
   pattern?: string
   min?: string
+  max?: string
   disabled?: boolean
   readOnly?: boolean
   field?: any

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

@@ -17,6 +17,7 @@ export default function Dynamic({
   priceOptions,
   datatokenOptions,
   onOceanChange,
+  onLiquidityProviderFeeChange,
   generateName,
   content
 }: {
@@ -24,6 +25,7 @@ export default function Dynamic({
   priceOptions: PriceOptions
   datatokenOptions: DataTokenOptions
   onOceanChange: (event: ChangeEvent<HTMLInputElement>) => void
+  onLiquidityProviderFeeChange: (event: ChangeEvent<HTMLInputElement>) => void
   generateName: () => void
   content: any
 }): ReactElement {
@@ -104,10 +106,14 @@ export default function Dynamic({
           <Tooltip content={content.tooltips.liquidityProviderFee} />
         </Label>
         <InputElement
+          type="number"
           value={liquidityProviderFee}
           name="liquidityProviderFee"
-          readOnly
           postfix="%"
+          onChange={onLiquidityProviderFeeChange}
+          min="0.1"
+          max="0.9"
+          step="0.1"
         />
       </footer>
 

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

@@ -48,12 +48,22 @@ export default function Price(props: InputProps): ReactElement {
   const [amountOcean, setAmountOcean] = useState('1')
   const [tokensToMint, setTokensToMint] = useState<number>()
   const [datatokenOptions, setDatatokenOptions] = useState<DataTokenOptions>()
+  const [liquidityProviderFee, setLiquidityProviderFee] = useState<string>(
+    priceOptions.liquidityProviderFee
+  )
 
   function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
     setAmountOcean(event.target.value)
     helpers.setValue({ ...field.value, price: event.target.value })
   }
 
+  // TODO: trigger Yup inline validation
+  function handleLiquidityProviderFeeChange(
+    event: ChangeEvent<HTMLInputElement>
+  ) {
+    setLiquidityProviderFee(event.target.value)
+  }
+
   function handleTabChange(tabName: string) {
     const type = tabName.toLowerCase()
     helpers.setValue({ ...field.value, type })
@@ -73,6 +83,10 @@ export default function Price(props: InputProps): ReactElement {
     helpers.setValue({ ...field.value, tokensToMint })
   }, [amountOcean])
 
+  useEffect(() => {
+    helpers.setValue({ ...field.value, liquidityProviderFee })
+  }, [liquidityProviderFee])
+
   // Generate new DT name & symbol
   useEffect(() => {
     generateName()
@@ -96,9 +110,10 @@ export default function Price(props: InputProps): ReactElement {
       content: (
         <Dynamic
           ocean={amountOcean}
-          priceOptions={{ ...priceOptions, tokensToMint }}
+          priceOptions={{ ...priceOptions, tokensToMint, liquidityProviderFee }}
           datatokenOptions={datatokenOptions}
           onOceanChange={handleOceanChange}
+          onLiquidityProviderFeeChange={handleLiquidityProviderFeeChange}
           generateName={generateName}
           content={content.dynamic}
         />
@@ -111,7 +126,7 @@ export default function Price(props: InputProps): ReactElement {
       <Tabs items={tabs} handleTabChange={handleTabChange} />
       {debug === true && (
         <pre>
-          <code>{JSON.stringify(field.value)}</code>
+          <code>{JSON.stringify(field.value, null, 2)}</code>
         </pre>
       )}
     </div>

src/models/FormPublish.ts

@@ -13,6 +13,10 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
       .required('Required'),
     weightOnDataToken: Yup.string().required('Required'),
     liquidityProviderFee: Yup.string()
+      .length(3)
+      .min(0.1)
+      .max(0.9)
+      .required('Required')
   }),
   files: Yup.array<FileMetadata>().required('Required').nullable(),
   description: Yup.string().required('Required'),