From 5c667cd2bb7f58652ef06c41d2aa893dd43b1db1 Mon Sep 17 00:00:00 2001
From: neural-machine <98684598+neural-machine@users.noreply.github.com>
Date: Fri, 16 Sep 2022 16:03:26 -0700
Subject: [PATCH] Dynamic swap fee display (#260)

* Dynamic swap fee display

* Upgrade to Typescript 4.5 for Awaited

* Upgraded lock file

* Compact liquidity total

* swap fee fixes for default lpFee

* 0 fix

* SwapInfo typing fixes

* Default params

Co-authored-by: Bao <baomai@berkeley.edu>
---
 .../components/LiquidityBreakdown.tsx         | 41 +++++++++++--------
 package.json                                  |  2 +-
 pages/pools/[pool].tsx                        |  2 +
 queries/querySwapInfo.ts                      | 25 ++++++++++-
 queries/useQueryPools.ts                      |  4 +-
 yarn.lock                                     |  8 ++--
 6 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/features/liquidity/components/LiquidityBreakdown.tsx b/features/liquidity/components/LiquidityBreakdown.tsx
index 4003a146..3713b81a 100644
--- a/features/liquidity/components/LiquidityBreakdown.tsx
+++ b/features/liquidity/components/LiquidityBreakdown.tsx
@@ -5,7 +5,6 @@ import {
   Column,
   Divider,
   dollarValueFormatter,
-  dollarValueFormatterWithDecimals,
   ImageForTokenLogo,
   InfoIcon,
   Inline,
@@ -34,6 +33,8 @@ type LiquidityBreakdownProps = {
   yieldPercentageReturn: number
   rewardsContracts: Array<SerializedRewardsContract>
   size: 'large' | 'small'
+  lpFee?: number
+  protocolFee?: number
 }
 
 type PoolHeaderProps = {
@@ -73,6 +74,23 @@ const PoolHeader = ({ tokenA, tokenB, priceBreakdown }: PoolHeaderProps) => (
   </Inline>
 )
 
+const SwapFee = ({
+  protocolFee = 0,
+  lpFee = 0.3,
+}: {
+  protocolFee?: number
+  lpFee?: number
+}) => (
+  <>
+    <Text variant="header">{`${protocolFee + lpFee}%`}</Text>
+    <Tooltip
+      label={`${lpFee}% of Swap Fee goes to LP Providers (LP) and ${protocolFee}% goes to Raw DAO`}
+    >
+      <Button variant="ghost" size="small" icon={<InfoIcon />} />
+    </Tooltip>
+  </>
+)
+
 export const LiquidityBreakdown = ({
   tokenA,
   tokenB,
@@ -80,6 +98,8 @@ export const LiquidityBreakdown = ({
   totalLiquidity,
   yieldPercentageReturn,
   rewardsContracts,
+  lpFee,
+  protocolFee,
   size = 'large',
 }: LiquidityBreakdownProps) => {
   const [{ price: tokenPrice }, isPriceLoading] = useTokenToTokenPrice({
@@ -103,9 +123,8 @@ export const LiquidityBreakdown = ({
   const compactTokenAAmount = formatCompactNumber(tokenAAmount, 'tokenAmount')
   const compactTokenBAmount = formatCompactNumber(tokenBAmount, 'tokenAmount')
 
-  const formattedTotalLiquidity = dollarValueFormatterWithDecimals(
-    totalLiquidity?.dollarValue,
-    { includeCommaSeparation: true }
+  const formattedTotalLiquidity = formatCompactNumber(
+    totalLiquidity?.dollarValue
   )
 
   const formattedYieldPercentageReturn = dollarValueFormatter(
@@ -176,12 +195,7 @@ export const LiquidityBreakdown = ({
                 </Text>
 
                 <Inline gap={2}>
-                  <Text variant="header">0.3%</Text>
-                  <Tooltip
-                    label={`0.2% of Swap Fee goes to LP Providers (LP) and 0.1% goes to Raw DAO`}
-                  >
-                    <Button variant="ghost" size="small" icon={<InfoIcon />} />
-                  </Tooltip>
+                  <SwapFee lpFee={lpFee} protocolFee={protocolFee} />
                 </Inline>
               </Column>
               {__POOL_REWARDS_ENABLED__ &&
@@ -251,12 +265,7 @@ export const LiquidityBreakdown = ({
             </Text>
 
             <Inline gap={2}>
-              <Text variant="header">0.3%</Text>
-              <Tooltip
-                label={`0.2% of Swap Fee goes to LP Providers (LP) and 0.1% goes to Raw DAO`}
-              >
-                <Button variant="ghost" size="small" icon={<InfoIcon />} />
-              </Tooltip>
+              <SwapFee lpFee={lpFee} protocolFee={protocolFee} />
             </Inline>
           </Column>
 
diff --git a/package.json b/package.json
index bb4ba399..a37d2151 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,6 @@
     "next-bundle-junoblocks": "^1.0.2",
     "postcss": "^8.3.5",
     "prettier": "^2.3.2",
-    "typescript": "4.3.5"
+    "typescript": "4.5"
   }
 }
diff --git a/pages/pools/[pool].tsx b/pages/pools/[pool].tsx
index 6761f1cc..aec5f398 100644
--- a/pages/pools/[pool].tsx
+++ b/pages/pools/[pool].tsx
@@ -185,6 +185,8 @@ export default function Pool() {
               yieldPercentageReturn={
                 pool.liquidity.rewards.annualYieldPercentageReturn
               }
+              lpFee={pool.swap_info.lp_fee_percent}
+              protocolFee={pool.swap_info.protocol_fee_percent}
               rewardsContracts={pool.liquidity.rewards.contracts}
               size={isMobile ? 'small' : 'large'}
             />
diff --git a/queries/querySwapInfo.ts b/queries/querySwapInfo.ts
index 67476cdd..ec6c25bd 100644
--- a/queries/querySwapInfo.ts
+++ b/queries/querySwapInfo.ts
@@ -1,12 +1,35 @@
 import { getSwapInfo } from '../services/swap'
 
-export async function querySwapInfo({ context: { client }, swap_address }) {
+const safeNum = (attr: string | undefined): number | undefined =>
+  attr != undefined ? Number(attr) : undefined
+
+export type SwapInfoResponse = {
+  swap_address: string
+  lp_token_supply: number
+  lp_token_address: string
+  token1_denom: string
+  token1_reserve: number
+  token2_denom: string
+  token2_reserve: number
+  owner?: string
+  lp_fee_percent?: number
+  protocol_fee_percent?: number
+  protocol_fee_recipient?: string
+}
+
+export async function querySwapInfo({
+  context: { client },
+  swap_address,
+}): Promise<SwapInfoResponse> {
   const swap = await getSwapInfo(swap_address, client)
+
   return {
     ...swap,
     swap_address,
     token1_reserve: Number(swap.token1_reserve),
     token2_reserve: Number(swap.token2_reserve),
     lp_token_supply: Number(swap.lp_token_supply),
+    protocol_fee_percent: safeNum(swap.protocol_fee_percent),
+    lp_fee_percent: safeNum(swap.lp_fee_percent),
   }
 }
diff --git a/queries/useQueryPools.ts b/queries/useQueryPools.ts
index 5a0736c8..97843c5a 100644
--- a/queries/useQueryPools.ts
+++ b/queries/useQueryPools.ts
@@ -16,7 +16,7 @@ import {
   SerializedRewardsContract,
 } from './queryRewardsContracts'
 import { queryStakedLiquidity } from './queryStakedLiquidity'
-import { querySwapInfo } from './querySwapInfo'
+import { querySwapInfo, SwapInfoResponse } from './querySwapInfo'
 import { useGetTokenDollarValueQuery } from './useGetTokenDollarValueQuery'
 import { PoolEntityType, usePoolsListQuery } from './usePoolsListQuery'
 
@@ -54,6 +54,7 @@ export type PoolLiquidityState = {
 
 export type PoolEntityTypeWithLiquidity = PoolEntityType & {
   liquidity: PoolLiquidityState
+  swap_info: SwapInfoResponse
 }
 
 type QueryMultiplePoolsArgs = {
@@ -191,6 +192,7 @@ export const useQueryMultiplePoolsLiquidity = ({
     return {
       ...pool,
       liquidity,
+      swap_info: swap,
     }
   }
 
diff --git a/yarn.lock b/yarn.lock
index e1f71174..b2af9068 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5631,10 +5631,10 @@ type@^2.5.0:
   resolved "https://registry.yarnpkg.com/type/-/type-2.6.0.tgz#3ca6099af5981d36ca86b78442973694278a219f"
   integrity sha512-eiDBDOmkih5pMbo9OqsqPRGMljLodLcwd5XD5JbtNB0o89xZAwynY9EdCDsJU7LtcVCClu9DvM7/0Ep1hYX3EQ==
 
-typescript@4.3.5:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
-  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+typescript@4.5:
+  version "4.5.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
+  integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"