diff --git a/content/price.json b/content/price.json index 9ae6f8acc..4c3f278b0 100644 --- a/content/price.json +++ b/content/price.json @@ -26,13 +26,14 @@ "pool": { "tooltips": { "price": "Explain how this price is determined...", - "liquidity": "Explain what this represents, advantage of providing liquidity..." + "liquidity": "Providing liquidity will earn you SWAPFEE% on every transaction in this pool, proportionally to your share of the pool." }, "add": { "title": "Add Liquidity", "output": { + "help": "Providing liquidity will earn you SWAPFEE% on every transaction in this pool, proportionally to your share of the pool. Your token input will be converted based on the weight of the pool.", "titleIn": "You will receive", - "titleOut": "You will earn" + "titleOut": "Pool conversion" }, "action": "Approve & Supply", "warning": "Use at your own risk. Please familiarize yourself [with the risks](https://blog.oceanprotocol.com/on-staking-on-data-in-ocean-market-3d8e09eb0a13) and the [Terms of Use](/terms)." diff --git a/src/components/organisms/AssetActions/Pool/Add/FormAdd.tsx b/src/components/organisms/AssetActions/Pool/Add/FormAdd.tsx index 9ee1dce10..f63c730c1 100644 --- a/src/components/organisms/AssetActions/Pool/Add/FormAdd.tsx +++ b/src/components/organisms/AssetActions/Pool/Add/FormAdd.tsx @@ -66,23 +66,34 @@ export default function FormAdd({ return } if (Number(values.amount) > Number(amountMax)) return + const poolTokens = await ocean.pool.calcPoolOutGivenSingleIn( poolAddress, coin === 'OCEAN' ? ocean.pool.oceanAddress : ocean.pool.dtAddress, - values.amount.toString() + `${values.amount}` ) setNewPoolTokens(poolTokens) - setNewPoolShare( - totalBalance && - ( + totalBalance && + setNewPoolShare( + `${ (Number(poolTokens) / (Number(totalPoolTokens) + Number(poolTokens))) * 100 - ).toFixed(2) - ) + }` + ) } calculatePoolShares() - }, [values.amount]) + }, [ + values.amount, + totalBalance, + totalPoolTokens, + amountMax, + coin, + poolAddress, + ocean.pool, + setNewPoolTokens, + setNewPoolShare + ]) return ( <> diff --git a/src/components/organisms/AssetActions/Pool/Add/Output.module.css b/src/components/organisms/AssetActions/Pool/Add/Output.module.css new file mode 100644 index 000000000..d2120aa03 --- /dev/null +++ b/src/components/organisms/AssetActions/Pool/Add/Output.module.css @@ -0,0 +1,23 @@ +.output { + display: grid; + gap: var(--spacer); + grid-template-columns: 1fr 1fr; + padding-bottom: calc(var(--spacer) / 2); +} + +.output p { + font-weight: var(--font-weight-bold); + margin-bottom: calc(var(--spacer) / 8); +} + +.output div:first-child [class*='token'] { + white-space: normal; +} + +.output div:first-child [class*='token'] > figure { + display: none; +} + +.help { + text-align: center; +} diff --git a/src/components/organisms/AssetActions/Pool/Add/Output.tsx b/src/components/organisms/AssetActions/Pool/Add/Output.tsx new file mode 100644 index 000000000..cff2a71a6 --- /dev/null +++ b/src/components/organisms/AssetActions/Pool/Add/Output.tsx @@ -0,0 +1,100 @@ +import { FormikContextType, useFormikContext } from 'formik' +import { graphql, useStaticQuery } from 'gatsby' +import React, { ReactElement, useEffect, useState } from 'react' +import { FormAddLiquidity } from '.' +import TokenBalance from '../../../../../@types/TokenBalance' +import FormHelp from '../../../../atoms/Input/Help' +import Token from '../Token' +import styles from './Output.module.css' +import Decimal from 'decimal.js' + +const contentQuery = graphql` + query PoolAddOutputQuery { + content: allFile(filter: { relativePath: { eq: "price.json" } }) { + edges { + node { + childContentJson { + pool { + add { + output { + help + titleIn + titleOut + } + } + } + } + } + } + } + } +` + +export default function Output({ + newPoolTokens, + newPoolShare, + swapFee, + dtSymbol, + totalPoolTokens, + totalBalance, + coin +}: { + newPoolTokens: string + newPoolShare: string + swapFee: string + dtSymbol: string + totalPoolTokens: string + totalBalance: TokenBalance + coin: string +}): ReactElement { + const data = useStaticQuery(contentQuery) + const { + help, + titleIn, + titleOut + } = data.content.edges[0].node.childContentJson.pool.add.output + + // Connect with form + const { values }: FormikContextType = useFormikContext() + + const [poolOcean, setPoolOcean] = useState('0') + const [poolDatatoken, setPoolDatatoken] = useState('0') + + useEffect(() => { + if (!values.amount || !totalBalance || !totalPoolTokens) return + const newPoolSupply = new Decimal(totalPoolTokens).plus(newPoolTokens) + const ratio = new Decimal(newPoolTokens).div(newPoolSupply) + const newOceanReserve = + coin === 'OCEAN' + ? new Decimal(totalBalance.ocean).plus(values.amount) + : new Decimal(totalBalance.ocean) + const newDtReserve = + coin === 'OCEAN' + ? new Decimal(totalBalance.datatoken) + : new Decimal(totalBalance.datatoken).plus(values.amount) + const poolOcean = newOceanReserve.mul(ratio).toString() + const poolDatatoken = newDtReserve.mul(ratio).toString() + setPoolOcean(poolOcean) + setPoolDatatoken(poolDatatoken) + }, [values.amount, coin, totalBalance, totalPoolTokens, newPoolShare]) + + return ( + <> + + {help.replace('SWAPFEE', swapFee)} + +
+
+

{titleIn}

+ + +
+
+

{titleOut}

+ + +
+
+ + ) +} diff --git a/src/components/organisms/AssetActions/Pool/Add/index.module.css b/src/components/organisms/AssetActions/Pool/Add/index.module.css index 424ddec90..3f5b2967c 100644 --- a/src/components/organisms/AssetActions/Pool/Add/index.module.css +++ b/src/components/organisms/AssetActions/Pool/Add/index.module.css @@ -18,26 +18,6 @@ margin-bottom: 0; } -.output { - display: grid; - gap: var(--spacer); - grid-template-columns: 1fr 1fr; - padding-bottom: calc(var(--spacer) / 2); -} - -.output p { - font-weight: var(--font-weight-bold); - margin-bottom: calc(var(--spacer) / 8); -} - -.output [class*='token'] { - white-space: normal; -} - -.output [class*='token'] > figure { - display: none; -} - .warning { margin-left: -3rem; margin-right: -3rem; diff --git a/src/components/organisms/AssetActions/Pool/Add/index.tsx b/src/components/organisms/AssetActions/Pool/Add/index.tsx index 47b6248b8..23a6ec579 100644 --- a/src/components/organisms/AssetActions/Pool/Add/index.tsx +++ b/src/components/organisms/AssetActions/Pool/Add/index.tsx @@ -8,10 +8,10 @@ import * as Yup from 'yup' import { Formik } from 'formik' import FormAdd from './FormAdd' import styles from './index.module.css' -import Token from '../Token' import Alert from '../../../../atoms/Alert' import TokenBalance from '../../../../../@types/TokenBalance' import { useUserPreferences } from '../../../../../providers/UserPreferences' +import Output from './Output' const contentQuery = graphql` query PoolAddQuery { @@ -22,10 +22,6 @@ const contentQuery = graphql` pool { add { title - output { - titleIn - titleOut - } action warning } @@ -186,17 +182,15 @@ export default function Add({ )} -
-
-

{content.output.titleIn}

- - -
-
-

{content.output.titleOut}

- -
-
+ Your Liquidity - + } ocean={`${userLiquidity?.ocean}`}