diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx index 65c18b9ab..53203239f 100644 --- a/src/components/organisms/AssetActions/Pool/Add.tsx +++ b/src/components/organisms/AssetActions/Pool/Add.tsx @@ -2,25 +2,43 @@ import React, { ReactElement, useState, ChangeEvent } from 'react' import styles from './Add.module.css' import stylesIndex from './index.module.css' import Button from '../../../atoms/Button' -import Input from '../../../atoms/Input' import { useOcean } from '@oceanprotocol/react' import Header from './Header' import Loader from '../../../atoms/Loader' import { toast } from 'react-toastify' import InputElement from '../../../atoms/Input/InputElement' +import Token from './Token' +import { Balance } from './' + +function calculatePercent(percent: number, num: number) { + return (percent / 100) * num +} export default function Add({ setShowAdd, dtSymbol, - poolAddress + poolAddress, + totalPoolTokens, + totalBalance }: { setShowAdd: (show: boolean) => void dtSymbol: string poolAddress: string + totalPoolTokens: string + totalBalance: Balance }): ReactElement { const { ocean, accountId } = useOcean() const [amount, setAmount] = useState() const [isLoading, setIsLoading] = useState() + const [newDtAmount, setNewDtAmount] = useState() + + const newPoolTokens = + totalBalance && + ((Number(amount) / Number(totalBalance.ocean)) * 100).toFixed(2) + + const newPoolShare = + totalBalance && + ((Number(newPoolTokens) / Number(totalPoolTokens)) * 100).toFixed(2) async function handleAddLiquidity() { setIsLoading(true) @@ -59,7 +77,12 @@ export default function Add({ /> -

You will receive:

+
+

You will receive:

+ + + +
{isLoading ? ( diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx index 319292612..af1e2a920 100644 --- a/src/components/organisms/AssetActions/Pool/index.tsx +++ b/src/components/organisms/AssetActions/Pool/index.tsx @@ -12,7 +12,7 @@ import Tooltip from '../../../atoms/Tooltip' import Conversion from '../../../atoms/Price/Conversion' import EtherscanLink from '../../../atoms/EtherscanLink' -interface Balance { +export interface Balance { ocean: string dt: string } @@ -37,7 +37,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement { const poolShare = totalBalance && userBalance && - ((Number(totalPoolTokens) * Number(poolTokens)) / 100).toFixed(2) + ((Number(poolTokens) / Number(totalPoolTokens)) * 100).toFixed(2) useEffect(() => { if (!ocean || !accountId || !poolAddress || !price) return @@ -98,6 +98,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement { setShowAdd={setShowAdd} dtSymbol={dtSymbol} poolAddress={poolAddress} + totalPoolTokens={totalPoolTokens} + totalBalance={totalBalance} /> ) : showRemove ? (