From d9a4b5697cf63e4131decc54f46ba00c4130fa5d Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 31 Aug 2020 14:17:40 +0200
Subject: [PATCH] output liquidity provider fee from pool

---
 .../AssetActions/Pool/Add.module.css          |  4 +++-
 .../organisms/AssetActions/Pool/Add.tsx       | 24 +++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

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<string>()
   const [txId, setTxId] = useState<string>('')
   const [isLoading, setIsLoading] = useState<boolean>()
 
@@ -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({
       </div>
 
       <div className={styles.output}>
-        <p>You will receive</p>
-        <Token symbol="BPT" balance={newPoolTokens} />
-        <Token symbol="% of pool" balance={newPoolShare} />
+        <div>
+          <p>You will receive</p>
+          <Token symbol="BPT" balance={newPoolTokens} />
+          <Token symbol="% of pool" balance={newPoolShare} />
+        </div>
+        <div>
+          <p>You will earn</p>
+          <Token symbol="%" balance={swapFee} />
+          of each pool transaction
+        </div>
       </div>
 
       <Actions