Merge pull request #138 from oceanprotocol/feature/first-price

Display firstPrice helper upon dynamic price creation

src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx

@@ -12,8 +12,8 @@ import stylesIndex from './index.module.css'
 import { useFormikContext } from 'formik'
 import { PriceOptionsMarket } from '../../../../../@types/MetaData'
 import { DDO } from '@oceanprotocol/lib'
-import Fixed from './Fixed'
 import Price from './Price'
+import Decimal from 'decimal.js'
 
 export default function Dynamic({
   ddo,
@@ -25,16 +25,36 @@ export default function Dynamic({
   const { account, balance, networkId, refreshBalance } = useOcean()
   const { dtSymbol, dtName } = usePricing(ddo)
 
+  const [firstPrice, setFirstPrice] = useState<string>()
+
   // Connect with form
   const { values } = useFormikContext()
   const {
     price,
     weightOnDataToken,
-    weightOnOcean
+    weightOnOcean,
+    swapFee,
+    dtAmount,
+    oceanAmount
   } = values as PriceOptionsMarket
 
   const [error, setError] = useState<string>()
 
+  // Calculate firstPrice whenever user values change
+  useEffect(() => {
+    const tokenAmountOut = 1
+    const weightRatio = new Decimal(weightOnDataToken).div(
+      new Decimal(weightOnOcean)
+    )
+    const diff = new Decimal(dtAmount).minus(tokenAmountOut)
+    const y = new Decimal(dtAmount).div(diff)
+    const foo = y.pow(weightRatio).minus(new Decimal(1))
+    const tokenAmountIn = new Decimal(oceanAmount)
+      .times(foo)
+      .div(new Decimal(1).minus(new Decimal(swapFee / 100)))
+    setFirstPrice(`${tokenAmountIn}`)
+  }, [swapFee, weightOnOcean, weightOnDataToken, dtAmount, oceanAmount])
+
   // Check: account, network & insufficient balance
   useEffect(() => {
     if (!account) {
@@ -78,7 +98,7 @@ export default function Dynamic({
         Price <Tooltip content={content.tooltips.poolInfo} />
       </h4>
 
-      <Price ddo={ddo} />
+      <Price ddo={ddo} firstPrice={firstPrice} />
 
       <h4 className={styles.title}>
         Datatoken Liquidity Pool <Tooltip content={content.tooltips.poolInfo} />

src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css

@@ -9,17 +9,20 @@
   }
 }
 
-.grid {
+.price {
   margin-left: -2rem;
   margin-right: -2rem;
   padding-top: var(--spacer);
+  background: var(--brand-grey-dimmed);
+  border-top: 1px solid var(--brand-grey-lighter);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+}
+
+.grid {
   display: grid;
   gap: var(--spacer);
   grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
   justify-content: center;
-  background: var(--brand-grey-dimmed);
-  border-top: 1px solid var(--brand-grey-lighter);
-  border-bottom: 1px solid var(--brand-grey-lighter);
 }
 
 .fixed label {
@@ -42,3 +45,13 @@
 .datatoken strong {
   color: var(--brand-grey-dark);
 }
+
+.firstPrice {
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
+  text-align: center;
+  margin-top: -1rem;
+  padding-top: calc(var(--spacer) / 3);
+  padding-bottom: calc(var(--spacer) / 3);
+  border-top: 1px solid var(--brand-grey-lighter);
+}

src/components/organisms/AssetContent/Pricing/FormPricing/Price.tsx

@@ -6,32 +6,51 @@ import Input from '../../../../atoms/Input'
 import styles from './Price.module.css'
 import Error from './Error'
 import { DDO } from '@oceanprotocol/lib'
+import PriceUnit from '../../../../atoms/Price/PriceUnit'
 
-export default function Price({ ddo }: { ddo: DDO }): ReactElement {
+export default function Price({
+  ddo,
+  firstPrice
+}: {
+  ddo: DDO
+  firstPrice?: string
+}): ReactElement {
   const [field, meta] = useField('price')
   const { dtName, dtSymbol } = usePricing(ddo)
 
   return (
-    <div className={styles.grid}>
-      <div className={styles.form}>
-        <Input
-          value={field.value}
-          name="price"
-          type="number"
-          prefix="OCEAN"
-          min="1"
-          {...field}
-          additionalComponent={
-            <Conversion price={field.value} className={styles.conversion} />
-          }
-        />
-        <Error meta={meta} />
-      </div>
-      <div className={styles.datatoken}>
-        <h4>
-          = <strong>1</strong> {dtName} — {dtSymbol}
-        </h4>
+    <div className={styles.price}>
+      <div className={styles.grid}>
+        <div className={styles.form}>
+          <Input
+            value={field.value}
+            name="price"
+            type="number"
+            prefix="OCEAN"
+            min="1"
+            {...field}
+            additionalComponent={
+              <Conversion price={field.value} className={styles.conversion} />
+            }
+          />
+          <Error meta={meta} />
+        </div>
+        <div className={styles.datatoken}>
+          <h4>
+            = <strong>1</strong> {dtName} — {dtSymbol}
+          </h4>
+        </div>
       </div>
+      {firstPrice && (
+        <aside className={styles.firstPrice}>
+          Expected first price:{' '}
+          <PriceUnit
+            price={Number(firstPrice) > 0 ? firstPrice : '-'}
+            small
+            conversion
+          />
+        </aside>
+      )}
     </div>
   )
 }

src/components/organisms/AssetContent/index.tsx

@@ -30,7 +30,8 @@ export default function AssetContent({
 
   const isOwner = accountId === ddo.publicKey[0].owner
   const hasNoPrice = ddo.price.type === ''
-  const showPricing = isOwner && hasNoPrice
+  // TODO: ONLY FOR DEBUGGING
+  const showPricing = true || (isOwner && hasNoPrice)
 
   return (
     <article className={styles.grid}>