diff --git a/projects/dex-ui/src/assets/images/tokens/BEANWSTETHCP2w.svg b/projects/dex-ui/src/assets/images/tokens/BEANWSTETHCP2w.svg new file mode 100644 index 0000000000..c2898ed381 --- /dev/null +++ b/projects/dex-ui/src/assets/images/tokens/BEANWSTETHCP2w.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/projects/dex-ui/src/components/Liquidity/AddLiquidity.tsx b/projects/dex-ui/src/components/Liquidity/AddLiquidity.tsx index 8b66a16099..ad8fc8e01b 100644 --- a/projects/dex-ui/src/components/Liquidity/AddLiquidity.tsx +++ b/projects/dex-ui/src/components/Liquidity/AddLiquidity.tsx @@ -76,7 +76,7 @@ const AddLiquidityContent = ({ staleTime: 15 * 1000, refetchOnWindowFocus: "always", select: (data) => { - return [data[token1.symbol] || null, data[token2.symbol] || null]; + return [data[token1.symbol] || null, data[token2.symbol] || null]; // price indexed by token symbol } }); const invalidate = useInvalidateScopedQueries(); @@ -91,11 +91,6 @@ const AddLiquidityContent = ({ const someWellReservesEmpty = Boolean(wellReserves && wellReserves.some((reserve) => reserve.eq(0))); const areSomeInputsZero = Boolean(inputs.some((amt) => amt.value.eq("0"))); - useEffect(() => { - console.log({ someWellReservesEmpty, areSomeInputsZero }); - - }, [someWellReservesEmpty, areSomeInputsZero]) - const atLeastOneAmountNonZero = useMemo(() => { if (!well.tokens || well.tokens.length === 0) return false; diff --git a/projects/dex-ui/src/components/Liquidity/RemoveLiquidity.tsx b/projects/dex-ui/src/components/Liquidity/RemoveLiquidity.tsx index fbbdfb3d52..c5a1aba2d8 100644 --- a/projects/dex-ui/src/components/Liquidity/RemoveLiquidity.tsx +++ b/projects/dex-ui/src/components/Liquidity/RemoveLiquidity.tsx @@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; import { TokenInput } from "src/components/Swap/TokenInput"; import { Token, TokenValue } from "@beanstalk/sdk"; import styled from "styled-components"; -import { images } from "src/assets/images/tokens"; import { useAccount } from "wagmi"; import { Well } from "@beanstalk/sdk/Wells"; import { useLiquidityQuote } from "src/wells/useLiquidityQuote"; @@ -24,7 +23,6 @@ import { displayTokenSymbol } from "src/utils/format"; import { LoadingTemplate } from "../LoadingTemplate"; import { useLPPositionSummary } from "src/tokens/useLPPositionSummary"; import { ActionWalletButtonWrapper } from "src/components/Wallet"; -import { useQueryClient } from "@tanstack/react-query"; import { useInvalidateScopedQueries } from "src/utils/query/useInvalidateQueries"; import { queryKeys } from "src/utils/query/queryKeys"; @@ -38,24 +36,31 @@ type RemoveLiquidityProps = { well: Well; } & BaseRemoveLiquidityProps; -const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, handleSlippageValueChange }: RemoveLiquidityProps) => { +const RemoveLiquidityContent = ({ + well, + slippage, + slippageSettingsClickHandler, + handleSlippageValueChange +}: RemoveLiquidityProps) => { const { address } = useAccount(); const [wellLpToken, setWellLpToken] = useState(null); const [lpTokenAmount, setLpTokenAmount] = useState(); - const [removeLiquidityMode, setRemoveLiquidityMode] = useState(REMOVE_LIQUIDITY_MODE.Balanced); + const [removeLiquidityMode, setRemoveLiquidityMode] = useState( + REMOVE_LIQUIDITY_MODE.Balanced + ); const [singleTokenIndex, setSingleTokenIndex] = useState(0); const [amounts, setAmounts] = useState([]); const [prices, setPrices] = useState<(TokenValue | null)[]>(); const [tokenAllowance, setTokenAllowance] = useState(false); - + const { getPositionWithWell, refetch: refetchLPSummary } = useLPPositionSummary(); const position = getPositionWithWell(well); const invalidateScopedQuery = useInvalidateScopedQueries(); - + const { reserves: wellReserves, refetch: refetchWellReserves } = useWellReserves(well); const sdk = useSdk(); const lpBalance = position?.external || TokenValue.ZERO; - + useEffect(() => { const run = async () => { if (!well.tokens) return; @@ -78,14 +83,13 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, const { oneTokenQuote } = oneToken; const { customRatioQuote } = custom; - const hasEnoughBalance = !address || !wellLpToken || !lpTokenAmount || !lpBalance ? false : lpTokenAmount.lte(lpBalance); + const hasEnoughBalance = + !address || !wellLpToken || !lpTokenAmount || !lpBalance ? false : lpTokenAmount.lte(lpBalance); useEffect(() => { if (well.lpToken) { - let lpTokenWithMetadata = well.lpToken; - lpTokenWithMetadata.setMetadata({ logo: images[well.lpToken.symbol] ?? images.DEFAULT }); setLpTokenAmount(undefined); - setWellLpToken(lpTokenWithMetadata); + setWellLpToken(well.lpToken); } }, [well.lpToken]); @@ -137,18 +141,30 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, return; } const quoteAmountLessSlippage = balancedQuote.quote.map((q) => q.subSlippage(slippage)); - removeLiquidityTxn = await well.removeLiquidity(lpTokenAmount, quoteAmountLessSlippage, address, undefined, { - gasLimit: balancedQuote.estimate.mul(1.2).toBigNumber() - }); + removeLiquidityTxn = await well.removeLiquidity( + lpTokenAmount, + quoteAmountLessSlippage, + address, + undefined, + { + gasLimit: balancedQuote.estimate.mul(1.2).toBigNumber() + } + ); toast.confirming(removeLiquidityTxn); } else { if (!customRatioQuote) { return; } const quoteAmountWithSlippage = lpTokenAmount.addSlippage(slippage); - removeLiquidityTxn = await well.removeLiquidityImbalanced(quoteAmountWithSlippage, amounts, address, undefined, { + removeLiquidityTxn = await well.removeLiquidityImbalanced( + quoteAmountWithSlippage, + amounts, + address, + undefined, + { gasLimit: customRatioQuote.estimate.mul(1.2).toBigNumber() - }); + } + ); toast.confirming(removeLiquidityTxn); } const receipt = await removeLiquidityTxn.wait(); @@ -156,15 +172,15 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, resetState(); refetchWellReserves(); refetchLPSummary(); - invalidateScopedQuery(queryKeys.tokenBalance(wellLpToken?.symbol)); - invalidateScopedQuery(queryKeys.tokenBalance(well?.tokens?.[0]?.symbol)); - invalidateScopedQuery(queryKeys.tokenBalance(well?.tokens?.[1]?.symbol)); + invalidateScopedQuery(queryKeys.tokenBalance(wellLpToken?.address)); + invalidateScopedQuery(queryKeys.tokenBalance(well?.tokens?.[0]?.address)); + invalidateScopedQuery(queryKeys.tokenBalance(well?.tokens?.[1]?.address)); } catch (error) { Log.module("RemoveLiquidity").error("Error removing liquidity: ", (error as Error).message); toast.error(error); } } - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, [ well, lpTokenAmount, @@ -181,8 +197,11 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, ]); const handleSwitchRemoveMode = (newMode: REMOVE_LIQUIDITY_MODE) => { - const currentMode = removeLiquidityMode === REMOVE_LIQUIDITY_MODE.Custom || removeLiquidityMode === REMOVE_LIQUIDITY_MODE.Balanced; - const _newMode = newMode === REMOVE_LIQUIDITY_MODE.Custom || newMode === REMOVE_LIQUIDITY_MODE.Balanced; + const currentMode = + removeLiquidityMode === REMOVE_LIQUIDITY_MODE.Custom || + removeLiquidityMode === REMOVE_LIQUIDITY_MODE.Balanced; + const _newMode = + newMode === REMOVE_LIQUIDITY_MODE.Custom || newMode === REMOVE_LIQUIDITY_MODE.Balanced; if (currentMode && _newMode) { setRemoveLiquidityMode(newMode); } else { @@ -224,7 +243,12 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, ); const buttonLabel = useMemo( - () => (lpTokenAmountNonZero ? (hasEnoughBalance ? "Remove Liquidity →" : "Insufficient Balance") : "Input Token Amount"), + () => + lpTokenAmountNonZero + ? hasEnoughBalance + ? "Remove Liquidity →" + : "Insufficient Balance" + : "Input Token Amount", [hasEnoughBalance, lpTokenAmountNonZero] ); @@ -234,7 +258,12 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, } if (lpTokenAmount && lpTokenAmount.gt(0)) { - const tokenHasMinAllowance = await hasMinimumAllowance(address, well.address, wellLpToken, lpTokenAmount); + const tokenHasMinAllowance = await hasMinimumAllowance( + address, + well.address, + wellLpToken, + lpTokenAmount + ); Log.module("addliquidity").debug( `Token ${wellLpToken.symbol} with amount ${lpTokenAmount.toHuman()} has approval ${tokenHasMinAllowance}` ); @@ -268,7 +297,8 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, checkMinAllowanceForLpToken(); }, [well.tokens, address, lpTokenAmount, checkMinAllowanceForLpToken]); - const approveButtonDisabled = !tokenAllowance && !!lpTokenAmount && lpTokenAmount.lte(TokenValue.ZERO); + const approveButtonDisabled = + !tokenAllowance && !!lpTokenAmount && lpTokenAmount.lte(TokenValue.ZERO); const selectedQuote = useMemo(() => { if (removeLiquidityMode === REMOVE_LIQUIDITY_MODE.OneToken) { @@ -324,8 +354,16 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, active={removeLiquidityMode === REMOVE_LIQUIDITY_MODE.OneToken} stretch > - - handleSwitchRemoveMode(REMOVE_LIQUIDITY_MODE.OneToken)}>Single Token + + handleSwitchRemoveMode(REMOVE_LIQUIDITY_MODE.OneToken)} + > + Single Token + @@ -334,8 +372,16 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, active={removeLiquidityMode !== REMOVE_LIQUIDITY_MODE.OneToken} stretch > - - handleSwitchRemoveMode(REMOVE_LIQUIDITY_MODE.Balanced)}>Multiple Tokens + + handleSwitchRemoveMode(REMOVE_LIQUIDITY_MODE.Balanced)} + > + Multiple Tokens + @@ -369,13 +415,22 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, {removeLiquidityMode === REMOVE_LIQUIDITY_MODE.OneToken && ( {well.tokens!.map((token: Token, index: number) => ( - handleSwitchSingleToken(index)}> + handleSwitchSingleToken(index)} + > - + {token.symbol} {singleTokenIndex === index ? ( - {oneTokenQuote ? oneTokenQuote.quote.toHuman() : "0"} + + {oneTokenQuote ? oneTokenQuote.quote.toHuman() : "0"} + ) : ( {"0"} )} @@ -392,7 +447,9 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, checked={removeLiquidityMode === REMOVE_LIQUIDITY_MODE.Balanced} onClick={() => handleSwitchRemoveMode( - removeLiquidityMode === REMOVE_LIQUIDITY_MODE.Custom ? REMOVE_LIQUIDITY_MODE.Balanced : REMOVE_LIQUIDITY_MODE.Custom + removeLiquidityMode === REMOVE_LIQUIDITY_MODE.Custom + ? REMOVE_LIQUIDITY_MODE.Balanced + : REMOVE_LIQUIDITY_MODE.Custom ) } /> diff --git a/projects/dex-ui/src/utils/addresses.ts b/projects/dex-ui/src/utils/addresses.ts index b5b6b938bc..b6d5b4524c 100644 --- a/projects/dex-ui/src/utils/addresses.ts +++ b/projects/dex-ui/src/utils/addresses.ts @@ -42,4 +42,4 @@ export const toAddressMap = ( prev[key] = curr; return prev; }, {}); -}; \ No newline at end of file +}; diff --git a/projects/dex-ui/src/wells/useWells.tsx b/projects/dex-ui/src/wells/useWells.tsx index 2e373cecbc..ebef564f60 100644 --- a/projects/dex-ui/src/wells/useWells.tsx +++ b/projects/dex-ui/src/wells/useWells.tsx @@ -61,6 +61,12 @@ const tokenMetadata = tokenMetadataJson as TokenMetadataMap; const setTokenMetadatas = (wells: Well[]) => { for (const well of wells) { if (!well.tokens) continue; + if (well.lpToken) { + const lpLogo = images[well.lpToken.symbol]; + if (lpLogo) { + well.lpToken.setMetadata({ logo: lpLogo }); + } + } well.tokens.forEach((token) => { const address = token.address.toLowerCase();