Merge pull request #48 from invariant-labs/remove-liquidity

add burn liquidity handler
invariant-labs · Aug 22, 2024 · 7783ae5 · 7783ae5
2 parents 23f9bf7 + 1de1722
commit 7783ae5
Show file tree

Hide file tree

Showing 7 changed files with 305 additions and 136 deletions.
diff --git a/frontend/src/components/Liquidity/FeeSwitch/FeeSwitch.tsx b/frontend/src/components/Liquidity/FeeSwitch/FeeSwitch.tsx
@@ -55,10 +55,8 @@ export const FeeSwitch: React.FC<IFeeSwitch> = ({
                 singleTabClasses.root,
                 index === bestTierIndex ? singleTabClasses.best : undefined
               ),
-              selected: singleTabClasses.selected,
-              disabled: singleTabClasses.disabled
+              selected: singleTabClasses.selected
             }}
-            disabled={index !== bestTierIndex}
           />
         ))}
       </Tabs>

diff --git a/frontend/src/components/Liquidity/FeeSwitch/style.ts b/frontend/src/components/Liquidity/FeeSwitch/style.ts
@@ -95,10 +95,6 @@ export const useSingleTabStyles = makeStyles()(() => {
       '&:hover': {
         color: colors.white.main
       }
-    },
-    disabled: {
-      ...typography.heading4,
-      color: '#3a466b' + ' !important'
     }
   }
 })

diff --git a/frontend/src/components/Liquidity/Liquidity.tsx b/frontend/src/components/Liquidity/Liquidity.tsx
@@ -3,7 +3,7 @@ import { SwapToken } from '@store/selectors/wallet'
 import React, { useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import useStyles from './style'
-import { FormatNumberThreshold, TokenPriceData } from '@store/consts/types'
+import { TokenPriceData } from '@store/consts/types'
 import { TooltipHover } from '@components/TooltipHover/TooltipHover'
 import { INoConnected, NoConnected } from '@components/NoConnected/NoConnected'
 import { ProgressState } from '@components/AnimatedButton/AnimatedButton'
@@ -37,7 +37,7 @@ export interface ILiquidity {
   midPrice: any
   setMidPrice: (mid: any) => void
   addLiquidityHandler: (tokenXDeposit: BN, tokenYDeposit: BN) => void
-  removeLiquidityHandler: (xAmount: number, yAmount: FormatNumberThreshold) => void
+  removeLiquidityHandler: () => void
   onChangePositionTokens: (
     tokenAIndex: number | null,
     tokenBindex: number | null,
@@ -81,7 +81,7 @@ export const Liquidity: React.FC<ILiquidity> = ({
   tokens,
   // setMidPrice,
   addLiquidityHandler,
-  // removeLiquidityHandler,
+  removeLiquidityHandler,
   onChangePositionTokens,
   calcAmount,
   feeTiers,
@@ -93,7 +93,7 @@ export const Liquidity: React.FC<ILiquidity> = ({
   tickSpacing,
   // isWaitingForNewPool,
   poolIndex,
-  // bestTiers,
+  bestTiers,
   // canCreateNewPool,
   handleAddToken,
   commonTokens,
@@ -182,19 +182,16 @@ export const Liquidity: React.FC<ILiquidity> = ({
     return trimLeadingZeros(printBN(result, tokens[printIndex].decimals))
   }
 
-  // const bestTierIndex =
-  //   tokenAIndex === null || tokenBIndex === null
-  //     ? undefined
-  //     : (bestTiers.find(
-  //         tier =>
-  //           (tier.tokenX.equals(tokens[tokenAIndex].assetAddress) &&
-  //             tier.tokenY.equals(tokens[tokenBIndex].assetAddress)) ||
-  //           (tier.tokenX.equals(tokens[tokenBIndex].assetAddress) &&
-  //             tier.tokenY.equals(tokens[tokenAIndex].assetAddress))
-  //       )?.bestTierIndex ?? undefined)
-
-  // Temporary set best tier index as only available
-  const bestTierIndex = 2
+  const bestTierIndex =
+    tokenAIndex === null || tokenBIndex === null
+      ? undefined
+      : (bestTiers.find(
+          tier =>
+            (tier.tokenX.equals(tokens[tokenAIndex].assetAddress) &&
+              tier.tokenY.equals(tokens[tokenBIndex].assetAddress)) ||
+            (tier.tokenX.equals(tokens[tokenBIndex].assetAddress) &&
+              tier.tokenY.equals(tokens[tokenAIndex].assetAddress))
+        )?.bestTierIndex ?? undefined)
 
   const updatePath = (
     index1: number | null,
@@ -285,11 +282,6 @@ export const Liquidity: React.FC<ILiquidity> = ({
     return '0'
   }, [tokenADeposit, tokenBDeposit, poolIndex])
 
-  useEffect(() => {
-    if (bestTierIndex) {
-      setPositionTokens(tokenAIndex, tokenBIndex, bestTierIndex, true)
-    }
-  }, [bestTierIndex])
   return (
     <Grid container className={classes.wrapper} direction='column'>
       {showNoConnected && <NoConnected {...noConnectedBlockerProps} />}
@@ -464,9 +456,7 @@ export const Liquidity: React.FC<ILiquidity> = ({
           ) : (
             <RemoveLiquidity
               tokens={tokens}
-              onRemoveLiquidity={() => {
-                //TODO
-              }}
+              onRemoveLiquidity={removeLiquidityHandler}
               LPTokenInputState={{
                 value: LPTokenDeposit,
                 setValue: value => {

diff --git a/frontend/src/containers/LiquidityWrapper/LiquidityWrapper.tsx b/frontend/src/containers/LiquidityWrapper/LiquidityWrapper.tsx
@@ -218,8 +218,6 @@ export const LiquidityWrapper: React.FC<IProps> = ({
     }
   }, [allLpPools])
 
-  console.log(lpPoolIndex)
-
   useEffect(() => {
     isMountedRef.current = true
     return () => {
@@ -252,7 +250,20 @@ export const LiquidityWrapper: React.FC<IProps> = ({
           )
         }
       }}
-      removeLiquidityHandler={() => {}}
+      removeLiquidityHandler={() => {
+        if (tokenAIndex !== null && tokenBIndex !== null) {
+          dispatch(
+            poolsActions.burn({
+              pair: new Pair(
+                tokens[tokenAIndex].address,
+                tokens[tokenBIndex].address,
+                FEE_TIERS[feeIndex]
+              ),
+              liquidityDelta: new BN(10000)
+            })
+          )
+        }
+      }}
       onChangePositionTokens={(tokenA, tokenB, feeTierIndex) => {
         setTokenAIndex(tokenA)
         setTokenBIndex(tokenB)

diff --git a/frontend/src/store/consts/static.ts b/frontend/src/store/consts/static.ts
@@ -2,6 +2,7 @@ import { BN } from '@project-serum/anchor'
 import { PublicKey } from '@solana/web3.js'
 import { FormatNumberThreshold, PrefixConfig } from './types'
 import { FEE_TIERS } from '@invariant-labs/sdk-eclipse/lib/utils'
+import { ISnackbar } from '@store/reducers/snackbars'
 export interface FeeTier {
   fee: BN
   tickSpacing?: number
@@ -277,3 +278,9 @@ export const addressTickerMap: { [key: string]: string } = {
   USDC: '5gFSyxjNsuQsZKn9g5L9Ky3cSUvJ6YXqWVuPzmSi8Trx',
   ETH: 'So11111111111111111111111111111111111111112'
 }
+
+export const SIGNING_SNACKBAR_CONFIG: Omit<ISnackbar, 'open'> = {
+  message: 'Signing transactions',
+  variant: 'pending',
+  persist: true
+}
diff --git a/frontend/src/store/reducers/pools.ts b/frontend/src/store/reducers/pools.ts
@@ -98,6 +98,11 @@ export interface MintData {
   lpPoolExists: boolean
 }
 
+export interface BurnData {
+  pair: Pair
+  liquidityDelta: BN
+}
+
 export const poolsSliceName = 'pools'
 const poolsSlice = createSlice({
   name: poolsSliceName,
@@ -151,6 +156,9 @@ const poolsSlice = createSlice({
     },
     mint(state, _action: PayloadAction<MintData>) {
       return state
+    },
+    burn(state, _action: PayloadAction<BurnData>) {
+      return state
     }
   }
 })