diff --git a/src/pages/range/add-liquidity.tsx b/src/pages/range/add-liquidity.tsx index 0e71fa526..1f45f6f28 100644 --- a/src/pages/range/add-liquidity.tsx +++ b/src/pages/range/add-liquidity.tsx @@ -29,7 +29,11 @@ import { feeTierMap, feeTiers } from "../../utils/pools"; import { useConfigStore } from "../../hooks/useConfigStore"; import { fetchRangePools } from "../../utils/queries"; import { ConnectWalletButton } from "../../components/Buttons/ConnectWalletButton"; -import { getRouterAddress, isStablePair, setDefaultRange } from "../../utils/config"; +import { + getRouterAddress, + isStablePair, + setDefaultRange, +} from "../../utils/config"; import BalanceDisplay from "../../components/Display/BalanceDisplay"; import { Tooltip, @@ -150,6 +154,7 @@ export default function AddLiquidity({}) { const [amountInDisabled, setAmountInDisabled] = useState(false); const [amountOutDisabled, setAmountOutDisabled] = useState(false); const [isLoading, setIsLoading] = useState(true); + const [poolType, setPoolType] = useState("Range"); ////////////////////////////////Pools @@ -334,7 +339,7 @@ export default function AddLiquidity({}) { useEffect(() => { if (!manualRange) { - console.log('autoset range') + console.log("autoset range"); const tickAtPrice = rangePoolData.tickAtPrice; setDefaultRange( tokenIn, @@ -345,7 +350,7 @@ export default function AddLiquidity({}) { setMinInput, setMaxInput, rangePoolData?.id - ) + ); } }, [manualRange, rangePoolData?.id]); @@ -369,7 +374,7 @@ export default function AddLiquidity({}) { const sqrtPrice = JSBI.BigInt(rangePoolData.poolPrice); const tickAtPrice = rangePoolData.tickAtPrice; if (rangePoolAddress != ZERO_ADDRESS && rangePrice == undefined) { - console.log('pool data changed') + console.log("pool data changed"); setDefaultRange( tokenIn, tokenOut, @@ -378,7 +383,7 @@ export default function AddLiquidity({}) { tickAtPrice, setMinInput, setMaxInput - ) + ); } setRangePrice( TickMath.getPriceStringAtSqrtPrice(sqrtPrice, tokenIn, tokenOut) @@ -400,14 +405,19 @@ export default function AddLiquidity({}) { args: [address, getRouterAddress(networkName)], chainId: chainId, watch: true, - enabled: tokenIn.address && - tokenIn.address != ZERO_ADDRESS, + enabled: tokenIn.address && tokenIn.address != ZERO_ADDRESS, onSuccess(data) { //console.log("allowance in fetched", allowanceInRange?.toString()); //setNeedsAllowanceIn(false); }, onError(error) { - console.log("Error tokenIn allowance", address, tokenIn.address, getRouterAddress(networkName), error); + console.log( + "Error tokenIn allowance", + address, + tokenIn.address, + getRouterAddress(networkName), + error + ); }, }); @@ -419,14 +429,19 @@ export default function AddLiquidity({}) { args: [address, getRouterAddress(networkName)], chainId: chainId, watch: true, - enabled: tokenOut.address && - tokenOut.address != ZERO_ADDRESS, + enabled: tokenOut.address && tokenOut.address != ZERO_ADDRESS, onSuccess(data) { //console.log("allowance out fetched", allowanceOutRange?.toString()); //setNeedsAllowanceOut(false); }, onError(error) { - console.log("Error tokenOut allowance", address, tokenOut.address, getRouterAddress(networkName), error); + console.log( + "Error tokenOut allowance", + address, + tokenOut.address, + getRouterAddress(networkName), + error + ); }, }); @@ -783,43 +798,70 @@ export default function AddLiquidity({}) {
-

RANGE POOL

+

POOL

{isLoading ? (
) : ( - -
-
-

ADD LIQUIDITY

+ +
+
+ + +
+
+
@@ -939,271 +981,269 @@ export default function AddLiquidity({}) {
-
-
-

SET A PRICE RANGE

- -
-
- - {priceOrder == (tokenIn.callId == 0) ? ( - <>{tokenOut.symbol} - ) : ( - <>{tokenIn.symbol} - )}{" "} - per{" "} - {priceOrder == (tokenIn.callId == 0) ? ( - <>{tokenIn.symbol} - ) : ( - <>{tokenOut.symbol} - )} - {" "} - -
-
- {rangePoolAddress != ZERO_ADDRESS && ( -
- - - -
- )} -
-
- {isLoading ? ( -
- ) : ( -
- MIN. PRICE - - { - - setMinInput(inputFilter(e.target.value)) - } - /> - } - + {poolType === "Range" && ( +
+
+
+

SET A PRICE RANGE

+
- )} - {isLoading ? ( -
- ) : ( -
- MAX. PRICE - - { - - setMaxInput(inputFilter(e.target.value)) - } - /> - } - +
+ + {priceOrder == (tokenIn.callId == 0) ? ( + <>{tokenOut.symbol} + ) : ( + <>{tokenIn.symbol} + )}{" "} + per{" "} + {priceOrder == (tokenIn.callId == 0) ? ( + <>{tokenIn.symbol} + ) : ( + <>{tokenOut.symbol} + )} + {" "} +
- )} -
- {rangePoolAddress == ZERO_ADDRESS && - rangePoolData.feeTier != undefined && ( -
-

- This pool does not exist so a start price must be set. -

-
- STARTING PRICE - - { - setStartPrice(inputFilter(e.target.value)); - }} - /> - -
+
+ {rangePoolAddress != ZERO_ADDRESS && ( +
+ + +
)} - -
-
-
Market Price
- - - -
- - - - 1{" "} +
+
+ {isLoading ? ( +
+ ) : ( +
+ MIN. PRICE + { - (priceOrder == (tokenIn.callId == 0) - ? tokenIn - : tokenOut - ).symbol - }{" "} - ={" "} + + setMinInput(inputFilter(e.target.value)) + } + /> + } + +
+ )} + {isLoading ? ( +
+ ) : ( +
+ MAX. PRICE + { - !isNaN(parseFloat(rangePrice)) && - ( - // pool exists - ( - rangePoolAddress != ZERO_ADDRESS - ) || + + setMaxInput(inputFilter(e.target.value)) + } + /> + } + +
+ )} +
+ {rangePoolAddress == ZERO_ADDRESS && + rangePoolData.feeTier != undefined && ( +
+

+ This pool does not exist so a start price must be set. +

+
+ + STARTING PRICE + + + { + setStartPrice(inputFilter(e.target.value)); + }} + /> + +
+
+ )} +
+ +
+
+
Market Price
+ + + +
+ + + + 1{" "} + { + (priceOrder == (tokenIn.callId == 0) + ? tokenIn + : tokenOut + ).symbol + }{" "} + ={" "} + {!isNaN(parseFloat(rangePrice)) && + // pool exists + (rangePoolAddress != ZERO_ADDRESS || // pool doesn't exist and start price is valid - ( - rangePoolAddress == ZERO_ADDRESS && + (rangePoolAddress == ZERO_ADDRESS && !isNaN(parseFloat(startPrice)) && - parseFloat(startPrice) > 0 - ) - ) + parseFloat(startPrice) > 0)) ? parseFloat( invertPrice(rangePrice, priceOrder) ).toPrecision(5) + @@ -1212,94 +1252,97 @@ export default function AddLiquidity({}) { ? tokenOut : tokenIn ).symbol - : "?" + " " + (priceOrder == (tokenIn.callId == 0) - ? tokenOut - : tokenIn - ).symbol - } -
- - - {/*
*/} -
- - - {tokenIn.symbol} - - - $ - {!isNaN(tokenIn.USDPrice) - ? (tokenIn.USDPrice * 1).toFixed(2) - : "?.??"} - -
-
-
- - - {tokenOut.symbol} - - - $ - {!isNaN(tokenOut.USDPrice) - ? (tokenOut.USDPrice * 1).toFixed(2) - : "?.??"} - -
- - - -
- {rangeWarning && ( -
- - - - Your position will not earn fees or be used in trades until - the market price moves into your range. + : "?" + + " " + + (priceOrder == (tokenIn.callId == 0) + ? tokenOut + : tokenIn + ).symbol} +
+ + + {/*
*/} +
+ + + {tokenIn.symbol} + + + $ + {!isNaN(tokenIn.USDPrice) + ? (tokenIn.USDPrice * 1).toFixed(2) + : "?.??"} + +
+
+
+ + + {tokenOut.symbol} + + + $ + {!isNaN(tokenOut.USDPrice) + ? (tokenOut.USDPrice * 1).toFixed(2) + : "?.??"} + +
+ + +
- )} + {rangeWarning && ( +
+ + + + Your position will not earn fees or be used in trades until + the market price moves into your range. +
+ )} - {(rangeMintParams.tokenInAmount?.gt(BN_ZERO) || - rangeMintParams.tokenOutAmount?.gt(BN_ZERO)) && - JSBI.lessThanOrEqual(rangeMintParams.liquidityAmount, ONE) ? ( -
- - - - Liquidity size too small: please add more tokens or decrease - the price range. -
- ) : ( - <> - )} + {(rangeMintParams.tokenInAmount?.gt(BN_ZERO) || + rangeMintParams.tokenOutAmount?.gt(BN_ZERO)) && + JSBI.lessThanOrEqual(rangeMintParams.liquidityAmount, ONE) ? ( +
+ + + + Liquidity size too small: please add more tokens or decrease + the price range. +
+ ) : ( + <> + )} +
-
+ )}
+

SELECT A FEE TIER