diff --git a/src/components/organisms/AssetActions/Pool/Add.module.css b/src/components/organisms/AssetActions/Pool/Add.module.css index b3c39e4ce..d6715dbf1 100644 --- a/src/components/organisms/AssetActions/Pool/Add.module.css +++ b/src/components/organisms/AssetActions/Pool/Add.module.css @@ -21,7 +21,9 @@ } .output { - text-align: center; + display: grid; + gap: var(--spacer); + grid-template-columns: 1fr 1fr; } .output p { diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx index 68e7ad0b2..e7def7493 100644 --- a/src/components/organisms/AssetActions/Pool/Add.tsx +++ b/src/components/organisms/AssetActions/Pool/Add.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useState, ChangeEvent } from 'react' +import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react' import styles from './Add.module.css' import { useOcean } from '@oceanprotocol/react' import Header from './Header' @@ -24,6 +24,7 @@ export default function Add({ }): ReactElement { const { ocean, accountId, balance } = useOcean() const [amount, setAmount] = useState('') + const [swapFee, setSwapFee] = useState() const [txId, setTxId] = useState('') const [isLoading, setIsLoading] = useState() @@ -35,6 +36,14 @@ export default function Add({ totalBalance && ((Number(newPoolTokens) / Number(totalPoolTokens)) * 100).toFixed(2) + useEffect(() => { + async function getFee() { + const swapFee = await ocean.pool.getSwapFee(accountId, poolAddress) + setSwapFee(swapFee) + } + getFee() + }, []) + async function handleAddLiquidity() { setIsLoading(true) @@ -78,9 +87,16 @@ export default function Add({
-

You will receive

- - +
+

You will receive

+ + +
+
+

You will earn

+ + of each pool transaction +