From 865c4d7b9d38f80d052297982111deeda0bf9c3c Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 16 Sep 2020 11:57:02 +0200
Subject: [PATCH] make liquidityProviderFee editable

---
 src/components/atoms/Input/index.tsx          |  1 +
 .../molecules/FormFields/Price/Dynamic.tsx    |  8 +++++++-
 .../molecules/FormFields/Price/index.tsx      | 19 +++++++++++++++++--
 src/models/FormPublish.ts                     |  4 ++++
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx
index 7ff57eb36..9b6002df2 100644
--- a/src/components/atoms/Input/index.tsx
+++ b/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
diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/molecules/FormFields/Price/Dynamic.tsx
index a53c01994..bfa7d1054 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.tsx
+++ b/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>
 
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index 89cafa62b..86b3b7cbb 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/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>
diff --git a/src/models/FormPublish.ts b/src/models/FormPublish.ts
index 66bba0bb0..c31432443 100644
--- a/src/models/FormPublish.ts
+++ b/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'),