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>

Author: neural-machine

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,13 +74,32 @@ 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,
   poolId,
   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>
 

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"
   }
 }

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'}
             />

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),
   }
 }

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,
     }
   }
 

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"