From 711dd38a9f05d1f9e88dad78fe8c3024d9b0f8a0 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 22 Sep 2020 09:50:18 +0000
Subject: [PATCH] output liquidity provider fee for given pool

---
 .../organisms/AssetActions/Pool/Add.tsx           | 15 ++++-----------
 .../organisms/AssetActions/Pool/index.tsx         | 13 +++++++++++++
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index abdec6aab..cfe9e1bea 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -16,17 +16,18 @@ export default function Add({
   setShowAdd,
   poolAddress,
   totalPoolTokens,
-  totalBalance
+  totalBalance,
+  liquidityProviderFee
 }: {
   setShowAdd: (show: boolean) => void
   poolAddress: string
   totalPoolTokens: string
   totalBalance: Balance
+  liquidityProviderFee: string
 }): ReactElement {
   const { debug } = useUserPreferences()
   const { ocean, accountId, balance } = useOcean()
   const [amount, setAmount] = useState('')
-  const [swapFee, setSwapFee] = useState<string>()
   const [txId, setTxId] = useState<string>('')
   const [isLoading, setIsLoading] = useState<boolean>()
 
@@ -38,14 +39,6 @@ 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)
 
@@ -96,7 +89,7 @@ export default function Add({
         </div>
         <div>
           <p>You will earn</p>
-          <Token symbol="%" balance={swapFee} />
+          <Token symbol="%" balance={liquidityProviderFee} />
           of each pool transaction
         </div>
       </div>
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index f668e0786..57b753ac7 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -33,6 +33,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const [totalBalance, setTotalBalance] = useState<Balance>()
   const [dtSymbol, setDtSymbol] = useState<string>()
   const [userBalance, setUserBalance] = useState<Balance>()
+  const [liquidityProviderFee, setLiquidityProviderFee] = useState<string>()
 
   const [showAdd, setShowAdd] = useState(false)
   const [showRemove, setShowRemove] = useState(false)
@@ -103,6 +104,13 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
         }
 
         setUserBalance(userBalance)
+
+        // Get liquidity provider fee
+        const liquidityProviderFee = await ocean.pool.getSwapFee(
+          accountId,
+          price.address
+        )
+        setLiquidityProviderFee(liquidityProviderFee)
       } catch (error) {
         console.error(error.message)
       } finally {
@@ -122,6 +130,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
           poolAddress={price.address}
           totalPoolTokens={totalPoolTokens}
           totalBalance={totalBalance}
+          liquidityProviderFee={liquidityProviderFee}
         />
       ) : showRemove ? (
         <Remove
@@ -168,6 +177,10 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
               {debug === true && (
                 <Token symbol="BPT" balance={totalPoolTokens} />
               )}
+              <Token
+                symbol="% liquidity provider fee"
+                balance={liquidityProviderFee}
+              />
             </div>
           </div>