output Liquidity Provider Fee

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

@@ -35,9 +35,10 @@
 
 .tokens {
   display: grid;
-  margin-bottom: -2rem;
+
   margin-left: -3rem;
   margin-right: -3rem;
+  border-bottom: 1px solid var(--brand-grey-lighter);
 }
 
 @media screen and (min-width: 40rem) {
@@ -46,11 +47,20 @@
   }
 }
 
+.summary {
+  text-align: center;
+  margin-top: var(--spacer);
+  margin-bottom: -2rem;
+}
+
+.summary input {
+  max-width: 5rem;
+}
+
 .alertArea {
   margin-left: -3rem;
   margin-right: -3rem;
   padding: var(--spacer) calc(var(--spacer) / 2);
   padding-bottom: 0;
   margin-top: var(--spacer);
-  border-top: 1px solid var(--brand-grey-lighter);
 }

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

@@ -8,17 +8,21 @@ import Alert from '../../../atoms/Alert'
 import Coin from './Coin'
 import { isCorrectNetwork } from '../../../../utils/wallet'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
+import InputElement from '../../../atoms/Input/InputElement'
+import Label from '../../../atoms/Input/Label'
 
 export default function Advanced({
   ocean,
   tokensToMint,
   weightOnDataToken,
-  onChange
+  liquidityProviderFee,
+  onOceanChange
 }: {
   ocean: string
   tokensToMint: number
   weightOnDataToken: string
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void
+  liquidityProviderFee: string
+  onOceanChange: (event: ChangeEvent<HTMLInputElement>) => void
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { account, balance, chainId, refreshBalance } = useOcean()
@@ -40,18 +44,19 @@ export default function Advanced({
     } else {
       setError(undefined)
     }
-  }, [ocean])
+  }, [ocean, chainId, account, balance])
 
   // refetch balance periodically
   useEffect(() => {
     if (!account) return
 
+    refreshBalance()
     const balanceInterval = setInterval(() => refreshBalance(), 10000) // 10 sec.
 
     return () => {
       clearInterval(balanceInterval)
     }
-  }, [])
+  }, [ocean, chainId, account])
 
   return (
     <div className={stylesIndex.content}>
@@ -78,7 +83,7 @@ export default function Advanced({
             symbol="OCEAN"
             value={ocean}
             weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
-            onChange={onChange}
+            onOceanChange={onOceanChange}
           />
           <Coin
             name="tokensToMint"
@@ -89,6 +94,16 @@ export default function Advanced({
           />
         </div>
 
+        <footer className={styles.summary}>
+          <Label htmlFor="liquidityProviderFee">Liquidity Provider Fee</Label>
+          <InputElement
+            value={liquidityProviderFee}
+            name="liquidityProviderFee"
+            readOnly
+            postfix="%"
+          />
+        </footer>
+
         {error && (
           <div className={styles.alertArea}>
             <Alert text={error} state="error" />

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

@@ -10,14 +10,14 @@ export default function Coin({
   name,
   value,
   weight,
-  onChange,
+  onOceanChange,
   readOnly
 }: {
   symbol: string
   name: string
   value: string
   weight: string
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
+  onOceanChange?: (event: ChangeEvent<HTMLInputElement>) => void
   readOnly?: boolean
 }): ReactElement {
   return (
@@ -31,7 +31,7 @@ export default function Coin({
           value={value}
           name={name}
           type="number"
-          onChange={onChange}
+          onChange={onOceanChange}
           readOnly={readOnly}
           prefix={symbol}
         />

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

@@ -8,7 +8,7 @@ import { useField } from 'formik'
 
 export default function Price(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props)
-  const { weightOnDataToken } = field.value
+  const { weightOnDataToken, liquidityProviderFee } = field.value
 
   const [ocean, setOcean] = useState('1')
   const [tokensToMint, setTokensToMint] = useState<number>()
@@ -26,7 +26,6 @@ export default function Price(props: InputProps): ReactElement {
   useEffect(() => {
     const tokensToMint = Number(ocean) * Number(weightOnDataToken)
     setTokensToMint(tokensToMint)
-    console.log(field.value)
     helpers.setValue({ ...field.value, tokensToMint })
   }, [ocean])
 
@@ -42,7 +41,8 @@ export default function Price(props: InputProps): ReactElement {
           ocean={ocean}
           tokensToMint={tokensToMint}
           weightOnDataToken={weightOnDataToken}
-          onChange={handleOceanChange}
+          onOceanChange={handleOceanChange}
+          liquidityProviderFee={liquidityProviderFee}
         />
       )
     }