From 2e3780b42dfde0ae770618c7b96176f9f79600aa Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Sun, 21 Apr 2024 21:36:07 +0700 Subject: [PATCH 01/37] fix: add position form state issue --- .../PoolSelectionGraph.tsx | 7 ++- .../SelectPriceRangeCustom.tsx | 52 ++++++++-------- .../EarnAddLiquidityContainer.tsx | 62 +++++++++++++++---- .../web/src/hooks/pool/use-select-pool.tsx | 9 ++- 4 files changed, 88 insertions(+), 42 deletions(-) diff --git a/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx b/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx index a958ab153..493ee7e03 100644 --- a/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx +++ b/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx @@ -246,8 +246,9 @@ export interface PoolSelectionGraphProps { setIsChangeMinMax: (value: boolean) => void; } -const PoolSelectionGraph: React.FC = ({ - feeTier, +const PoolSelectionGraph: React.FC = (props) => { + const { + feeTier, scaleX, scaleY, liquidityOfTickPoints, @@ -269,7 +270,7 @@ const PoolSelectionGraph: React.FC = ({ bottom: 0, }, setIsChangeMinMax, -}) => { + } = props; const [selectionColor, setSelectionColor] = useState(getSelectionColor("0", "0")); const svgRef = useRef(null); const chartRef = useRef(null); diff --git a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx index 3c2a8a3d0..db51ba786 100644 --- a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx +++ b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx @@ -53,7 +53,7 @@ const SelectPriceRangeCustom: React.FC = ({ isKeepToken, }) => { const router = useRouter(); - const { tickUpper, tickLower } = router?.query; + // const { tickUpper, tickLower } = router?.query; const { getGnotPath } = useGnotToGnot(); const { isLoadingCommon } = useLoading(); @@ -61,17 +61,19 @@ const SelectPriceRangeCustom: React.FC = ({ const GRAPH_HEIGHT = 160; const [startingPriceValue, setStartingPriceValue] = useState(""); const [tempPrice, setTempPrice] = useState(""); + function getPriceRange(price?: number | null) { const currentPriceRangeType = priceRangeType; const currentPrice = price || selectPool.currentPrice || 1; if (!selectPool.feeTier || !currentPriceRangeType) { return [0, currentPrice * 2]; } - const visibleRate = SwapFeeTierPriceRange[selectPool.feeTier][currentPriceRangeType].max / 100; const range = currentPrice * visibleRate; + return [currentPrice - range, currentPrice + range]; } + function getScaleRange() { const currentPrice = selectPool.currentPrice || 1; const [min, max] = getPriceRange(); @@ -142,6 +144,10 @@ const SelectPriceRangeCustom: React.FC = ({ return <>1 {currentTokenA.symbol} =   {currentTokenB.symbol}; }, [currentTokenA, currentTokenB, defaultPrice, selectPool.isCreate, startingPriceValue]); + useEffect(() => { + resetRange(); + }, [priceRangeType]); + const onClickTabItem = useCallback((symbol: string) => { const compareToken = tokenA.symbol === symbol ? tokenA : tokenB; selectPool.setCompareToken(compareToken); @@ -224,12 +230,6 @@ const SelectPriceRangeCustom: React.FC = ({ }, [tokenA]); useEffect(() => { - - if (tickUpper && tickLower && router.isReady) { - selectPool.setMinPosition(tickToPrice(Number(tickLower))); - selectPool.setMaxPosition(tickToPrice(Number(tickUpper))); - return; - } resetRange(priceRangeType); }, [selectPool.poolPath, selectPool.feeTier, priceRangeType, selectPool.startPrice, router.isReady]); @@ -292,25 +292,25 @@ const SelectPriceRangeCustom: React.FC = ({ selectType={getGnotPath(selectPool.compareToken)?.symbol || ""} list={[!isKeepToken ? getGnotPath(tokenA).symbol : getGnotPath(tokenB).symbol, isKeepToken ? getGnotPath(tokenA).symbol : getGnotPath(tokenB).symbol]} onClick={onClickTabItem} - /> -
-
- - - - - - -
+ /> +
- - - - - - -
-
+ + + + + + +
+
+ + + + + + +
+ )} diff --git a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx index 865349734..36deca35b 100644 --- a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx +++ b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx @@ -23,6 +23,7 @@ import { useRouter } from "next/router"; import { PoolModel } from "@models/pool/pool-model"; import { makeQueryString } from "@hooks/common/use-url-param"; import { isNumber } from "@utils/number-utils"; +import { useSearchParams } from "next/navigation"; export interface AddLiquidityPriceRage { type: PriceRangeType; @@ -56,6 +57,12 @@ const PRICE_RANGES: AddLiquidityPriceRage[] = [ ]; const EarnAddLiquidityContainer: React.FC = () => { + const router = useRouter(); + const { customTickLower, customTickUpper } = router.query; + const searchParams = useSearchParams(); + + const defaultPriceRangeType = searchParams.get("price_range_type"); + const [isEarnAdd, setIsEarnAdd] = useAtom(EarnState.isOneClick); const [swapValue, setSwapValue] = useAtom(SwapState.swap); const { tokenA = null, tokenB = null, type = "EXACT_IN", isReverted, isKeepToken = false } = swapValue; @@ -65,10 +72,13 @@ const EarnAddLiquidityContainer: React.FC = () => { const [exactType, setExactType] = useState<"EXACT_IN" | "EXACT_OUT">("EXACT_IN"); const [swapFeeTier, setSwapFeeTier] = useState("FEE_3000"); const [priceRanges] = useState(PRICE_RANGES); - const [priceRange, setPriceRange] = useState({ type: "Passive" }); + const [priceRange, setPriceRange] = useState( + () => { + return PRICE_RANGES.find(item => item.type === (defaultPriceRangeType || "Passive"))!; + } + ); const [initialized, setInitialized] = useState(false); const [defaultPrice, setDefaultPrice] = useState(null); - const router = useRouter(); const { openModal: openConnectWalletModal } = useConnectWalletModal(); @@ -81,7 +91,17 @@ const EarnAddLiquidityContainer: React.FC = () => { const { slippage, changeSlippage } = useSlippage(); const { updateBalances, updateTokenPrices, tokens } = useTokenData(); const [createOption, setCreateOption] = useState<{ startPrice: number | null, isCreate: boolean }>({ isCreate: false, startPrice: null }); - const selectPool = useSelectPool({ tokenA, tokenB, feeTier: swapFeeTier, isCreate: createOption.isCreate, startPrice: createOption.startPrice }); + const selectPool = useSelectPool({ + tokenA, + tokenB, + feeTier: swapFeeTier, + isCreate: createOption.isCreate, + startPrice: createOption.startPrice, + defaultPriceRange: [ + customTickLower ? tickToPrice(Number(customTickLower)) : null, + customTickUpper ? tickToPrice(Number(customTickUpper)) : null + ], + }); const { fetching, pools, feetierOfLiquidityMap, createPool, addLiquidity } = usePool({ tokenA, tokenB, compareToken: selectPool.compareToken, isReverted }); const { openModal: openConfirmModal } = useEarnAddLiquidityConfirmModal({ tokenA, @@ -182,13 +202,26 @@ const EarnAddLiquidityContainer: React.FC = () => { isCreate: !existPool, startPrice: existPool ? null : prev.startPrice })); - if (existPool) { - setPriceRange(priceRanges.find(range => range.type === "Passive") || null); - } else { - setPriceRange(priceRanges.find(range => range.type === "Custom") || null); - } + // if (existPool) { + // setPriceRange(priceRanges.find(range => range.type === "Passive") || null); + // } else { + // setPriceRange(priceRanges.find(range => range.type === "Custom") || null); + // } }, [pools, priceRanges]); + + // useEffect(() => { + // const currentPrice = selectPool.isCreate ? selectPool.startPrice : selectPool.currentPrice; + + // if(currentPrice && selectPool.feeTier && priceRange?.type) { + // const currentPriceRange = SwapFeeTierPriceRange[selectPool.feeTier][priceRange.type]; + // const minRateAmount = currentPrice * (currentPriceRange.min / 100); + // const maxRateAmount = currentPrice * (currentPriceRange.max / 100); + // selectPool.setMinPosition(currentPrice + minRateAmount); + // selectPool.setMaxPosition(currentPrice + maxRateAmount); + // } + // }, [priceRange?.type, selectPool]); + const changePriceRange = useCallback((priceRange: AddLiquidityPriceRage) => { setPriceRange(priceRange); if (priceRange.type !== "Custom") { @@ -202,6 +235,10 @@ const EarnAddLiquidityContainer: React.FC = () => { } }, [selectPool.isChangeMinMax]); + useEffect(() => { + setPriceRange(PRICE_RANGES.find(item => item.type === (defaultPriceRangeType || "Passive")) || null); + }, [defaultPriceRangeType]); + const changeTokenA = useCallback((token: TokenModel) => { setSwapValue((prev) => { if (token.wrappedPath === prev.tokenB?.wrappedPath) { @@ -470,13 +507,16 @@ const EarnAddLiquidityContainer: React.FC = () => { tokenA: tokenA?.path, tokenB: tokenB?.path, fee_tier: swapFeeTier === "NONE" ? "" : (swapFeeTier || "").slice(4), - tickLower: isNumber(selectPool.minPosition || "") ? priceToTick(selectPool.minPosition || 0) : null, - tickUpper: isNumber(selectPool.maxPosition || "") ? priceToTick(selectPool.maxPosition || 0) : null, + price_range_type: priceRange?.type, + ...((priceRange?.type === "Custom") && { + customTickLower: isNumber(selectPool.minPosition || "") ? priceToTick(selectPool.minPosition || 0) : null, + customTickUpper: isNumber(selectPool.maxPosition || "") ? priceToTick(selectPool.maxPosition || 0) : null, + }), }); if (tokenA?.path && tokenB?.path) { router.push(`/earn/add${queryString ? "?" + queryString : ""}`, undefined, { shallow: true }); } - }, [swapFeeTier, tokenA, tokenB, selectPool.minPosition, selectPool.maxPosition]); + }, [swapFeeTier, tokenA, tokenB, selectPool.minPosition, selectPool.maxPosition, priceRange?.type]); return ( { + const [ defaultMinPosition, defaultMaxPosition ] = defaultPriceRange; + const [, setCurrentPoolPath] = useAtom(EarnState.currentPoolPath); const [fullRange, setFullRange] = useState(false); const [focusPosition, setFocusPosition] = useState(0); const [zoomLevel, setZoomLevel] = useState(9); const { poolRepository } = useGnoswapContext(); - const [minPosition, setMinPosition] = useState(null); - const [maxPosition, setMaxPosition] = useState(null); + const [minPosition, setMinPosition] = useState(defaultMinPosition ?? null); + const [maxPosition, setMaxPosition] = useState(defaultMaxPosition ?? null); const [compareToken, setCompareToken] = useState(tokenA); const [poolInfo, setPoolInfo] = useState(null); const [latestPoolPath, setLatestPoolPath] = useState(null); @@ -360,6 +364,7 @@ export const useSelectPool = ({ } const minNearTick = priceToNearTick(minPosition, tickSpacing); const maxNearTick = priceToNearTick(maxPosition, tickSpacing); + // Possible bug setMaxPosition(tickToPrice(minNearTick)); setMaxPosition(tickToPrice(maxNearTick)); setInteractionType("FINISH"); From 676d5ec6ae7c7058d6a623ad44e572a37713773a Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Tue, 23 Apr 2024 09:07:30 +0700 Subject: [PATCH 02/37] wip: fix position form issue both on earn/add and pool/add --- .../PoolSelectionGraph.tsx | 42 +++---- .../SelectPriceRangeCustom.tsx | 58 +++++----- .../select-price-range/SelectPriceRange.tsx | 8 +- .../earn-add-liquidity/EarnAddLiquidity.tsx | 8 +- .../EarnAddLiquidityContainer.tsx | 103 ++++++++---------- .../PoolAddLiquidityContainer.tsx | 68 +++++++----- .../web/src/hooks/pool/use-select-pool.tsx | 22 +++- .../use-earn-add-liquidity-confirm-modal.tsx | 2 +- 8 files changed, 163 insertions(+), 148 deletions(-) diff --git a/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx b/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx index 493ee7e03..7aa387c82 100644 --- a/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx +++ b/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx @@ -249,27 +249,27 @@ export interface PoolSelectionGraphProps { const PoolSelectionGraph: React.FC = (props) => { const { feeTier, - scaleX, - scaleY, - liquidityOfTickPoints, - currentPrice = null, - displayLabels = 8, - width, - height, - minPrice, - maxPrice, - setMinPrice, - setMaxPrice, - selectedFullRange, - focusPosition, - zoomLevel, - margin = { - left: 0, - right: 0, - top: 0, - bottom: 0, - }, - setIsChangeMinMax, + scaleX, + scaleY, + liquidityOfTickPoints, + currentPrice = null, + displayLabels = 8, + width, + height, + minPrice, + maxPrice, + setMinPrice, + setMaxPrice, + selectedFullRange, + focusPosition, + zoomLevel, + margin = { + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + setIsChangeMinMax, } = props; const [selectionColor, setSelectionColor] = useState(getSelectionColor("0", "0")); const svgRef = useRef(null); diff --git a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx index db51ba786..cc58f34f0 100644 --- a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx +++ b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx @@ -25,7 +25,6 @@ import { useLoading } from "@hooks/common/use-loading"; import { useGnotToGnot } from "@hooks/token/use-gnot-wugnot"; import ExchangeRate from "../exchange-rate/ExchangeRate"; import { subscriptFormat } from "@utils/number-utils"; -import { useRouter } from "next/router"; export interface SelectPriceRangeCustomProps { tokenA: TokenModel; @@ -38,6 +37,8 @@ export interface SelectPriceRangeCustomProps { handleSwapValue: () => void; isEmptyLiquidity: boolean; isKeepToken: boolean; + setPriceRange: (type?: PriceRangeType) => void; + defaultPriceRange?: [number | null, number | null]; } const SelectPriceRangeCustom: React.FC = ({ @@ -51,8 +52,9 @@ const SelectPriceRangeCustom: React.FC = ({ handleSwapValue, isEmptyLiquidity, isKeepToken, + setPriceRange, + defaultPriceRange, }) => { - const router = useRouter(); // const { tickUpper, tickLower } = router?.query; const { getGnotPath } = useGnotToGnot(); @@ -144,10 +146,6 @@ const SelectPriceRangeCustom: React.FC = ({ return <>1 {currentTokenA.symbol} =   {currentTokenB.symbol}; }, [currentTokenA, currentTokenB, defaultPrice, selectPool.isCreate, startingPriceValue]); - useEffect(() => { - resetRange(); - }, [priceRangeType]); - const onClickTabItem = useCallback((symbol: string) => { const compareToken = tokenA.symbol === symbol ? tokenA : tokenB; selectPool.setCompareToken(compareToken); @@ -165,26 +163,27 @@ const SelectPriceRangeCustom: React.FC = ({ selectPool.selectFullRange(); }, [selectPool]); - function initPriceRange(inputPriceRangeType?: PriceRangeType | null) { - // if (inputPriceRangeType === "Custom") return; - + function initPriceRange(inputPriceRangeType?: PriceRangeType | null, defaultPriceRange: [number | null, number | null] = [null, null]) { const currentPriceRangeType = inputPriceRangeType || priceRangeType; const currentPrice = selectPool.isCreate ? selectPool.startPrice : selectPool.currentPrice; - if (currentPrice && selectPool.feeTier && currentPriceRangeType && !selectPool.isChangeMinMax) { + const [defaultMinPrice, defaultMaxPrice] = defaultPriceRange; + + if (currentPrice && selectPool.feeTier && currentPriceRangeType) { const priceRange = SwapFeeTierPriceRange[selectPool.feeTier][currentPriceRangeType]; const minRateAmount = currentPrice * (priceRange.min / 100); const maxRateAmount = currentPrice * (priceRange.max / 100); - selectPool.setMinPosition(currentPrice + minRateAmount); - selectPool.setMaxPosition(currentPrice + maxRateAmount); - } else if (selectPool.isChangeMinMax) { - selectPool.setMinPosition(selectPool.minPrice); - selectPool.setMaxPosition(selectPool.maxPrice); + selectPool.setMinPosition(defaultMinPrice || currentPrice + minRateAmount); + selectPool.setMaxPosition(defaultMaxPrice || currentPrice + maxRateAmount); } } - function resetRange(priceRangeType?: PriceRangeType | null) { + function adjustRangeManually(adjustFn: () => void) { + adjustFn(); + } + + function resetRange(priceRangeType?: PriceRangeType | null, defaultPriceRange?: [number | null, number | null]) { selectPool.resetRange(); - initPriceRange(priceRangeType); + initPriceRange(priceRangeType, defaultPriceRange); defaultScaleX.domain(getScaleRange()); scaleX.domain(defaultScaleX.domain()); } @@ -230,8 +229,8 @@ const SelectPriceRangeCustom: React.FC = ({ }, [tokenA]); useEffect(() => { - resetRange(priceRangeType); - }, [selectPool.poolPath, selectPool.feeTier, priceRangeType, selectPool.startPrice, router.isReady]); + resetRange(priceRangeType, defaultPriceRange); + }, [selectPool.poolPath, selectPool.feeTier, priceRangeType, selectPool.startPrice, defaultPriceRange]); useEffect(() => { if (!selectPool.poolPath) { @@ -339,8 +338,8 @@ const SelectPriceRangeCustom: React.FC = ({ zoomLevel={selectPool.zoomLevel} minPrice={selectPool.minPrice} maxPrice={selectPool.maxPrice} - setMinPrice={selectPool.setMinPosition} - setMaxPrice={selectPool.setMaxPosition} + setMinPrice={(tick) => adjustRangeManually(() => selectPool.setMinPosition(tick))} + setMaxPrice={(tick) => adjustRangeManually(() => selectPool.setMaxPosition(tick))} liquidityOfTickPoints={selectPool.liquidityOfTickPoints} currentPrice={selectPool.currentPrice} focusPosition={selectPool.focusPosition} @@ -361,9 +360,9 @@ const SelectPriceRangeCustom: React.FC = ({ feeTier={selectPool.feeTier || "NONE"} selectedFullRange={selectPool.selectedFullRange} onSelectCustomRange={onSelectCustomRangeByMin} - changePrice={selectPool.setMinPosition} - decrease={selectPool.decreaseMinTick} - increase={selectPool.increaseMinTick} + changePrice={(tick) => adjustRangeManually(() => selectPool.setMinPosition(tick))} + decrease={() => adjustRangeManually(() => selectPool.decreaseMinTick())} + increase={() => adjustRangeManually(() => selectPool.increaseMinTick())} currentPriceStr={currentPriceStr} setIsChangeMinMax={selectPool.setIsChangeMinMax} priceRangeType={priceRangeType} @@ -377,16 +376,19 @@ const SelectPriceRangeCustom: React.FC = ({ feeTier={selectPool.feeTier || "NONE"} selectedFullRange={selectPool.selectedFullRange} onSelectCustomRange={onSelectCustomRangeByMax} - changePrice={selectPool.setMaxPosition} - decrease={selectPool.decreaseMaxTick} - increase={selectPool.increaseMaxTick} + changePrice={(tick) => adjustRangeManually(() => selectPool.setMinPosition(tick))} + decrease={() => adjustRangeManually(() => selectPool.decreaseMaxTick())} + increase={() => adjustRangeManually(() => selectPool.increaseMaxTick())} currentPriceStr={currentPriceStrReverse} setIsChangeMinMax={selectPool.setIsChangeMinMax} priceRangeType={priceRangeType} />
-
resetRange()}> +
{ + setPriceRange(); + // resetRange(); + }}> Reset Range Reset diff --git a/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx b/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx index 538bd23d9..808923222 100644 --- a/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx +++ b/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx @@ -1,4 +1,4 @@ -import { PriceRangeStr, PriceRangeTooltip } from "@constants/option.constant"; +import { PriceRangeStr, PriceRangeTooltip, PriceRangeType } from "@constants/option.constant"; import React, { useCallback, useMemo } from "react"; import IconInfo from "@components/common/icons/IconInfo"; import IconStrokeArrowRight from "@components/common/icons/IconStrokeArrowRight"; @@ -23,6 +23,8 @@ interface SelectPriceRangeProps { handleSwapValue: () => void; isEmptyLiquidity: boolean; isKeepToken: boolean; + setPriceRange: (type?: PriceRangeType) => void; + defaultPriceRange?: [number | null, number | null]; } const SelectPriceRange: React.FC = ({ @@ -39,6 +41,8 @@ const SelectPriceRange: React.FC = ({ handleSwapValue, isEmptyLiquidity, isKeepToken, + setPriceRange, + defaultPriceRange, }) => { const selectedTokenPair = true; @@ -72,6 +76,8 @@ const SelectPriceRange: React.FC = ({ handleSwapValue={handleSwapValue} isEmptyLiquidity={isEmptyLiquidity} isKeepToken={isKeepToken} + setPriceRange={setPriceRange} + defaultPriceRange={defaultPriceRange} /> )} diff --git a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx index d150761f9..f7a4e3372 100644 --- a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx +++ b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx @@ -2,7 +2,7 @@ import Button, { ButtonHierarchy } from "@components/common/button/Button"; import SelectFeeTier from "@components/common/select-fee-tier/SelectFeeTier"; import React, { useCallback, useMemo, useState, useEffect } from "react"; import { EarnAddLiquidityWrapper, OutOfRangeWrapper } from "./EarnAddLiquidity.styles"; -import { AddLiquidityType, SwapFeeTierType, SwapFeeTierInfoMap, AddLiquiditySubmitType } from "@constants/option.constant"; +import { AddLiquidityType, SwapFeeTierType, SwapFeeTierInfoMap, AddLiquiditySubmitType, PriceRangeType } from "@constants/option.constant"; import { AddLiquidityPriceRage, PoolTick, PriceRangeSummary } from "@containers/earn-add-liquidity-container/EarnAddLiquidityContainer"; import LiquidityEnterAmounts from "@components/common/liquidity-enter-amounts/LiquidityEnterAmounts"; import SelectPair from "@components/common/select-pair/SelectPair"; @@ -59,6 +59,8 @@ interface EarnAddLiquidityProps { fetching: boolean; handleSwapValue: () => void; isKeepToken: boolean; + setPriceRange: (type?: PriceRangeType) => void; + defaultPriceRange?: [number | null, number | null]; } const EarnAddLiquidity: React.FC = ({ @@ -93,6 +95,8 @@ const EarnAddLiquidity: React.FC = ({ fetching, handleSwapValue, isKeepToken, + setPriceRange, + defaultPriceRange, }) => { const [openedSelectPair] = useState(isEarnAdd ? true : false); const [openedFeeTier, setOpenedFeeTier] = useState(false); @@ -309,6 +313,8 @@ const EarnAddLiquidity: React.FC = ({ handleSwapValue={handleSwapValue} isEmptyLiquidity={isEmptyObject(feetierOfLiquidityMap)} isKeepToken={isKeepToken} + setPriceRange={setPriceRange} + defaultPriceRange={defaultPriceRange} /> {selectedPriceRange && existTokenPair && selectedFeeRate && !showDim && } {!isLoading && isShowOutRange && diff --git a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx index 36deca35b..a0b759f3d 100644 --- a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx +++ b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx @@ -18,12 +18,12 @@ import { usePool } from "@hooks/pool/use-pool"; import { useOneClickStakingModal } from "@hooks/earn/use-one-click-staking-modal"; import { useSelectPool } from "@hooks/pool/use-select-pool"; import BigNumber from "bignumber.js"; -import { makeSwapFeeTier, priceToNearTick, priceToTick, tickToPrice } from "@utils/swap-utils"; +import { makeSwapFeeTier, priceToNearTick, tickToPrice } from "@utils/swap-utils"; +// import { makeSwapFeeTier, priceToNearTick, priceToTick, tickToPrice } from "@utils/swap-utils"; import { useRouter } from "next/router"; import { PoolModel } from "@models/pool/pool-model"; -import { makeQueryString } from "@hooks/common/use-url-param"; -import { isNumber } from "@utils/number-utils"; -import { useSearchParams } from "next/navigation"; +// import { makeQueryString } from "@hooks/common/use-url-param"; +// import { isNumber } from "@utils/number-utils"; export interface AddLiquidityPriceRage { type: PriceRangeType; @@ -58,12 +58,7 @@ const PRICE_RANGES: AddLiquidityPriceRage[] = [ const EarnAddLiquidityContainer: React.FC = () => { const router = useRouter(); - const { customTickLower, customTickUpper } = router.query; - const searchParams = useSearchParams(); - - const defaultPriceRangeType = searchParams.get("price_range_type"); - - const [isEarnAdd, setIsEarnAdd] = useAtom(EarnState.isOneClick); + const [isEarnAdd, setIsEarnAdd] = useAtom(EarnState.isOneClick); // Not used any more const [swapValue, setSwapValue] = useAtom(SwapState.swap); const { tokenA = null, tokenB = null, type = "EXACT_IN", isReverted, isKeepToken = false } = swapValue; @@ -72,11 +67,7 @@ const EarnAddLiquidityContainer: React.FC = () => { const [exactType, setExactType] = useState<"EXACT_IN" | "EXACT_OUT">("EXACT_IN"); const [swapFeeTier, setSwapFeeTier] = useState("FEE_3000"); const [priceRanges] = useState(PRICE_RANGES); - const [priceRange, setPriceRange] = useState( - () => { - return PRICE_RANGES.find(item => item.type === (defaultPriceRangeType || "Passive"))!; - } - ); + const [priceRange, setPriceRange] = useState(null); const [initialized, setInitialized] = useState(false); const [defaultPrice, setDefaultPrice] = useState(null); @@ -97,10 +88,6 @@ const EarnAddLiquidityContainer: React.FC = () => { feeTier: swapFeeTier, isCreate: createOption.isCreate, startPrice: createOption.startPrice, - defaultPriceRange: [ - customTickLower ? tickToPrice(Number(customTickLower)) : null, - customTickUpper ? tickToPrice(Number(customTickUpper)) : null - ], }); const { fetching, pools, feetierOfLiquidityMap, createPool, addLiquidity } = usePool({ tokenA, tokenB, compareToken: selectPool.compareToken, isReverted }); const { openModal: openConfirmModal } = useEarnAddLiquidityConfirmModal({ @@ -193,34 +180,22 @@ const EarnAddLiquidityContainer: React.FC = () => { return "CREATE_POOL"; }, [connectedWallet, isSwitchNetwork, tokenA, tokenB, tokenAAmountInput.amount, tokenAAmountInput.balance, tokenBAmountInput.amount, tokenBAmountInput.balance, selectPool.minPrice, selectPool.maxPrice, selectPool.compareToken?.path, selectPool.depositRatio]); - const selectSwapFeeTier = useCallback((swapFeeTier: SwapFeeTierType) => { - setSwapFeeTier(swapFeeTier); - const existsSwapFeeTiers = pools.map(pool => makeSwapFeeTier(pool.fee)); - const existPool = existsSwapFeeTiers.includes(swapFeeTier); + const selectSwapFeeTier = useCallback((feeTier: SwapFeeTierType) => { + setSwapFeeTier(feeTier); + const poolFeeTier = pools.map(pool => makeSwapFeeTier(pool.fee)); + const existPool = poolFeeTier.includes(feeTier); setCreateOption((prev) => ({ isCreate: !existPool, startPrice: existPool ? null : prev.startPrice })); - // if (existPool) { - // setPriceRange(priceRanges.find(range => range.type === "Passive") || null); - // } else { - // setPriceRange(priceRanges.find(range => range.type === "Custom") || null); - // } - }, [pools, priceRanges]); - - // useEffect(() => { - // const currentPrice = selectPool.isCreate ? selectPool.startPrice : selectPool.currentPrice; - - // if(currentPrice && selectPool.feeTier && priceRange?.type) { - // const currentPriceRange = SwapFeeTierPriceRange[selectPool.feeTier][priceRange.type]; - // const minRateAmount = currentPrice * (currentPriceRange.min / 100); - // const maxRateAmount = currentPrice * (currentPriceRange.max / 100); - // selectPool.setMinPosition(currentPrice + minRateAmount); - // selectPool.setMaxPosition(currentPrice + maxRateAmount); - // } - // }, [priceRange?.type, selectPool]); + if (existPool) { + setPriceRange(priceRanges.find(range => range.type === "Passive") || null); + } else { + setPriceRange(priceRanges.find(range => range.type === "Custom") || null); + } + }, [pools, priceRanges]); const changePriceRange = useCallback((priceRange: AddLiquidityPriceRage) => { setPriceRange(priceRange); @@ -236,8 +211,12 @@ const EarnAddLiquidityContainer: React.FC = () => { }, [selectPool.isChangeMinMax]); useEffect(() => { - setPriceRange(PRICE_RANGES.find(item => item.type === (defaultPriceRangeType || "Passive")) || null); - }, [defaultPriceRangeType]); + if (priceRange?.type !== "Custom") { + selectPool.setIsChangeMinMax(false); + } else { + selectPool.setIsChangeMinMax(true); + } + }, [priceRange?.type]); const changeTokenA = useCallback((token: TokenModel) => { setSwapValue((prev) => { @@ -472,8 +451,6 @@ const EarnAddLiquidityContainer: React.FC = () => { } }, [pools, selectPool.compareToken, tokenA, tokenB]); - - useEffect(() => { if (fetching && !swapValue?.isEarnChanged) { if (router.query?.fee_tier) { @@ -502,21 +479,23 @@ const EarnAddLiquidityContainer: React.FC = () => { }); }, [swapValue, setSwapValue, isKeepToken]); - useEffect(() => { - const queryString = makeQueryString({ - tokenA: tokenA?.path, - tokenB: tokenB?.path, - fee_tier: swapFeeTier === "NONE" ? "" : (swapFeeTier || "").slice(4), - price_range_type: priceRange?.type, - ...((priceRange?.type === "Custom") && { - customTickLower: isNumber(selectPool.minPosition || "") ? priceToTick(selectPool.minPosition || 0) : null, - customTickUpper: isNumber(selectPool.maxPosition || "") ? priceToTick(selectPool.maxPosition || 0) : null, - }), - }); - if (tokenA?.path && tokenB?.path) { - router.push(`/earn/add${queryString ? "?" + queryString : ""}`, undefined, { shallow: true }); - } - }, [swapFeeTier, tokenA, tokenB, selectPool.minPosition, selectPool.maxPosition, priceRange?.type]); + // useEffect(() => { + // const queryString = makeQueryString({ + // tokenA: tokenA?.path, + // tokenB: tokenB?.path, + // fee_tier: swapFeeTier === "NONE" ? "" : (swapFeeTier || "").slice(4), + // price_range_type: priceRange?.type, + // ...((priceRange?.type === "Custom") && { + // customTickLower: isNumber(selectPool.minPosition || "") ? priceToTick(selectPool.minPosition || 0) : null, + // customTickUpper: isNumber(selectPool.maxPosition || "") ? priceToTick(selectPool.maxPosition || 0) : null, + // }), + // }); + // if (tokenA?.path && tokenB?.path) { + // router.push(`/earn/add${queryString ? "?" + queryString : ""}`, undefined, { shallow: true }); + // } + // }, [swapFeeTier, tokenA, tokenB, selectPool.minPosition, selectPool.maxPosition, priceRange?.type]); + + console.log("🚀 ~ selectPool.isChangeMinMax:", selectPool.isChangeMinMax); return ( { fetching={fetching} handleSwapValue={handleSwapValue} isKeepToken={isKeepToken} + /// Update with provided price range, if receive undefine set to default price range + setPriceRange={(type) => { + setPriceRange(PRICE_RANGES.find(item => item.type === (type || "Passive")) ?? null); + } } /> ); }; diff --git a/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx b/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx index 538988af5..65246ceec 100644 --- a/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx +++ b/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx @@ -19,12 +19,13 @@ import { useTokenData } from "@hooks/token/use-token-data"; import { useOneClickStakingModal } from "@hooks/earn/use-one-click-staking-modal"; import { useSelectPool } from "@hooks/pool/use-select-pool"; import BigNumber from "bignumber.js"; -import { makeSwapFeeTier, priceToNearTick, priceToTick, tickToPrice } from "@utils/swap-utils"; +import { makeSwapFeeTier, priceToNearTick, tickToPrice } from "@utils/swap-utils"; +// import { makeSwapFeeTier, priceToNearTick, priceToTick, tickToPrice } from "@utils/swap-utils"; import { usePoolData } from "@hooks/pool/use-pool-data"; import { useGnotToGnot } from "@hooks/token/use-gnot-wugnot"; import { encryptId } from "@utils/common"; -import { makeQueryString } from "@hooks/common/use-url-param"; -import { isNumber } from "@utils/number-utils"; +// import { makeQueryString } from "@hooks/common/use-url-param"; +// import { isNumber } from "@utils/number-utils"; export interface AddLiquidityPriceRage { type: PriceRangeType; @@ -62,17 +63,18 @@ const EarnAddLiquidityContainer: React.FC = () => { const [initialized, setInitialized] = useState(false); const [swapValue, setSwapValue] = useAtom(SwapState.swap); const { tokenA = null, tokenB = null, type = "EXACT_IN", isKeepToken = false } = swapValue; - const router = useRouter(); + const router = useRouter(); const { getGnotPath } = useGnotToGnot(); - + const { tickLower, tickUpper } = router.query; + const tokenAAmountInput = useTokenAmountInput(tokenA); const tokenBAmountInput = useTokenAmountInput(tokenB); const [exactType, setExactType] = useState<"EXACT_IN" | "EXACT_OUT">("EXACT_IN"); const [swapFeeTier, setSwapFeeTier] = useState(null); const [priceRanges] = useState(PRICE_RANGES); - const [priceRange, setPriceRange] = useState( - null - ); + const [priceRange, setPriceRange] = useState(() => { + return PRICE_RANGES.find(item => item.type === ("Custom")) ?? null; + }); const [defaultPrice, setDefaultPrice] = useState(null); const { openModal: openConnectWalletModal } = useConnectWalletModal(); @@ -86,7 +88,17 @@ const EarnAddLiquidityContainer: React.FC = () => { const { slippage, changeSlippage } = useSlippage(); const { tokens, updateTokens, updateBalances, updateTokenPrices } = useTokenData(); const [createOption, setCreateOption] = useState<{ startPrice: number | null, isCreate: boolean }>({ isCreate: false, startPrice: null }); - const selectPool = useSelectPool({ tokenA, tokenB, feeTier: swapFeeTier, isCreate: createOption?.isCreate, startPrice: createOption?.startPrice }); + const selectPool = useSelectPool({ + tokenA, + tokenB, + feeTier: swapFeeTier, + isCreate: createOption?.isCreate, + startPrice: createOption?.startPrice, + defaultPriceRange: [ + tickLower ? tickToPrice(Number(tickLower)) : null, + tickUpper ? tickToPrice(Number(tickUpper)) : null + ], + }); const { updatePools } = usePoolData(); const { pools, feetierOfLiquidityMap, createPool, addLiquidity, fetching } = usePool({ tokenA, tokenB, compareToken: selectPool.compareToken }); const { openModal: openOneClickModal } = useOneClickStakingModal({ @@ -131,7 +143,6 @@ const EarnAddLiquidityContainer: React.FC = () => { const tokenASymbol = tokenA?.symbol === selectPool.compareToken?.symbol ? tokenA?.symbol : tokenB?.symbol; const tokenBSymbol = tokenA?.symbol === selectPool.compareToken?.symbol ? tokenB?.symbol : tokenA?.symbol; depositRatio = `${tokenARatioStr}% ${tokenASymbol} / ${tokenBRatioStr}% ${tokenBSymbol}`; - } feeBoost = selectPool.feeBoost === null ? "-" : `x${selectPool.feeBoost}`; @@ -184,18 +195,10 @@ const EarnAddLiquidityContainer: React.FC = () => { isCreate: !existPool, startPrice: existPool ? null : prev.startPrice })); - if (existPool) { - setPriceRange(priceRanges.find(range => range.type === "Passive") || null); - } else { - setPriceRange(priceRanges.find(range => range.type === "Custom") || null); - } - }, [pools, priceRanges]); + }, [pools]); const changePriceRange = useCallback((priceRange: AddLiquidityPriceRage) => { setPriceRange(priceRange); - if (priceRange.type !== "Custom") { - selectPool.setIsChangeMinMax(false); - } }, []); const changeTokenA = useCallback((token: TokenModel) => { @@ -322,13 +325,11 @@ const EarnAddLiquidityContainer: React.FC = () => { } if (!initialized) { const convertPath = encryptId(router.query["pool-path"] as string); - const type = router.query["type"] as string; const splitPath: string[] = convertPath.split(":") || []; const currentTokenA = tokens.find(token => token.path === splitPath[0]) || null; const currentTokenB = tokens.find(token => token.path === splitPath[1]) || null; const feeTier = makeSwapFeeTier(splitPath[2]); setSwapFeeTier(feeTier); - setPriceRange({ type: type ? "Custom" : "Passive" }); setSwapValue(prev => ({ ...prev, tokenA: currentTokenA ? { @@ -422,15 +423,17 @@ const EarnAddLiquidityContainer: React.FC = () => { }); }, [swapValue, setSwapValue, isKeepToken]); - useEffect(() => { - const queryString = makeQueryString({ - tickLower: isNumber(selectPool.minPosition || "") ? priceToTick(selectPool.minPosition || 0) : null, - tickUpper: isNumber(selectPool.maxPosition || "") ? priceToTick(selectPool.maxPosition || 0) : null, - }); - if (tokenA?.path && tokenB?.path) { - router.push(`/earn/pool/${router.query["pool-path"]}/add?${queryString}`, undefined, { shallow: true }); - } - }, [selectPool.minPosition, selectPool.maxPosition]); + // useEffect(() => { + // selectPool.resetRange(); + // const queryString = makeQueryString({ + // tickLower: isNumber(selectPool.minPosition || "") ? priceToTick(selectPool.minPosition || 0) : null, + // tickUpper: isNumber(selectPool.maxPosition || "") ? priceToTick(selectPool.maxPosition || 0) : null, + // }); + // if (tokenA?.path && tokenB?.path) { + // router.push(`/earn/pool/${router.query["pool-path"]}/add?${queryString}`, undefined, { shallow: true }); + // } + // }, [tickLower, tickUpper]); + useEffect(() => { if (selectPool.isChangeMinMax) { @@ -475,6 +478,11 @@ const EarnAddLiquidityContainer: React.FC = () => { fetching={fetching} handleSwapValue={handleSwapValue} isKeepToken={isKeepToken} + setPriceRange={(type) => setPriceRange(PRICE_RANGES.find(item => item.type === (type || ("Custom"))) ?? null)} + defaultPriceRange={[ + tickLower ? tickToPrice(Number(tickLower)) : null, + tickUpper ? tickToPrice(Number(tickUpper)) : null + ]} /> ); }; diff --git a/packages/web/src/hooks/pool/use-select-pool.tsx b/packages/web/src/hooks/pool/use-select-pool.tsx index 06d477faa..840bd5db3 100644 --- a/packages/web/src/hooks/pool/use-select-pool.tsx +++ b/packages/web/src/hooks/pool/use-select-pool.tsx @@ -17,7 +17,7 @@ interface Props { feeTier: SwapFeeTierType | null; isCreate?: boolean; startPrice?: number | null, - defaultPriceRange: [number | null, number | null] + defaultPriceRange?: [number | null, number | null] } export interface SelectPool { @@ -67,22 +67,32 @@ export const useSelectPool = ({ startPrice = null, defaultPriceRange, }: Props) => { - const [ defaultMinPosition, defaultMaxPosition ] = defaultPriceRange; + const [ defaultMinPosition, defaultMaxPosition ] = defaultPriceRange ?? [null, null]; + // const isInitialedPriceRange = useRef(false); const [, setCurrentPoolPath] = useAtom(EarnState.currentPoolPath); const [fullRange, setFullRange] = useState(false); const [focusPosition, setFocusPosition] = useState(0); const [zoomLevel, setZoomLevel] = useState(9); const { poolRepository } = useGnoswapContext(); - const [minPosition, setMinPosition] = useState(defaultMinPosition ?? null); - const [maxPosition, setMaxPosition] = useState(defaultMaxPosition ?? null); + const [minPosition, setMinPosition] = useState(null); + const [maxPosition, setMaxPosition] = useState(null); const [compareToken, setCompareToken] = useState(tokenA); const [poolInfo, setPoolInfo] = useState(null); const [latestPoolPath, setLatestPoolPath] = useState(null); const [interactionType, setInteractionType] = useState<"NONE" | "INTERACTION" | "TICK_UPDATE" | "FINISH">("NONE"); + // TODO Remove after all issue of the position form fixed const [isChangeMinMax, setIsChangeMinMax] = useState(false); const { isLoadingCommon } = useLoading(); + // useEffect(() => { + // if(defaultMinPosition && defaultMaxPosition && isInitialedPriceRange.current === false) { + // setMinPosition(defaultMinPosition); + // setMaxPosition(defaultMaxPosition); + // isInitialedPriceRange.current = true; + // } + // }, []); + const poolPath = useMemo(() => { setCurrentPoolPath(latestPoolPath); return latestPoolPath; @@ -270,8 +280,8 @@ export const useSelectPool = ({ excuteInteraction(() => { setZoomLevel(9); setFullRange(false); - changeMinPosition(null); - changeMaxPosition(null); + changeMinPosition(defaultMinPosition); + changeMaxPosition(defaultMaxPosition); }); }, [interactionType]); diff --git a/packages/web/src/hooks/token/use-earn-add-liquidity-confirm-modal.tsx b/packages/web/src/hooks/token/use-earn-add-liquidity-confirm-modal.tsx index 3f4e865a4..90fe6f071 100644 --- a/packages/web/src/hooks/token/use-earn-add-liquidity-confirm-modal.tsx +++ b/packages/web/src/hooks/token/use-earn-add-liquidity-confirm-modal.tsx @@ -213,7 +213,7 @@ export const useEarnAddLiquidityConfirmModal = ({ maxTick = priceToNearTick(selectPool.maxPrice, selectPool.tickSpacing); } } - + broadcastLoading(makeBroadcastAddLiquidityMessage("pending", { tokenASymbol: tokenA.symbol, tokenBSymbol: tokenB.symbol, From b3b1db9e7e376887e313ad99f11b6bae6c175607 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Tue, 23 Apr 2024 11:37:59 +0700 Subject: [PATCH 03/37] wip: fix position form issue both on earn/add and pool/add --- .../SelectPriceRangeCustom.tsx | 43 ++++++++++++------ .../select-price-range/SelectPriceRange.tsx | 9 ++-- .../earn-add-liquidity/EarnAddLiquidity.tsx | 9 ++-- .../EarnAddLiquidityContainer.tsx | 5 +-- .../PoolAddLiquidityContainer.tsx | 45 ++++++++++--------- .../web/src/hooks/pool/use-select-pool.tsx | 18 ++++---- 6 files changed, 75 insertions(+), 54 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx index cc58f34f0..307a45e7a 100644 --- a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx +++ b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx @@ -38,7 +38,8 @@ export interface SelectPriceRangeCustomProps { isEmptyLiquidity: boolean; isKeepToken: boolean; setPriceRange: (type?: PriceRangeType) => void; - defaultPriceRange?: [number | null, number | null]; + defaultPriceRangeRef?: React.MutableRefObject<(number | null)[] | undefined>; + defaultPriceRangeType: PriceRangeType; } const SelectPriceRangeCustom: React.FC = ({ @@ -52,8 +53,9 @@ const SelectPriceRangeCustom: React.FC = ({ handleSwapValue, isEmptyLiquidity, isKeepToken, - setPriceRange, - defaultPriceRange, + defaultPriceRangeType, + defaultPriceRangeRef, + setPriceRange }) => { // const { tickUpper, tickLower } = router?.query; @@ -67,11 +69,14 @@ const SelectPriceRangeCustom: React.FC = ({ function getPriceRange(price?: number | null) { const currentPriceRangeType = priceRangeType; const currentPrice = price || selectPool.currentPrice || 1; + console.log("🚀 ~ getPriceRange ~ currentPrice:", currentPrice); if (!selectPool.feeTier || !currentPriceRangeType) { return [0, currentPrice * 2]; } const visibleRate = SwapFeeTierPriceRange[selectPool.feeTier][currentPriceRangeType].max / 100; + console.log("🚀 ~ getPriceRange ~ visibleRate:", visibleRate); const range = currentPrice * visibleRate; + console.log("🚀 ~ getPriceRange ~ range:", range); return [currentPrice - range, currentPrice + range]; } @@ -80,6 +85,8 @@ const SelectPriceRangeCustom: React.FC = ({ const currentPrice = selectPool.currentPrice || 1; const [min, max] = getPriceRange(); const rangeGap = max - min; + console.log("🚀 ~ getScaleRange ~ min:", min); + console.log("🚀 ~ getScaleRange ~ max:", max); return [currentPrice - rangeGap, currentPrice + rangeGap]; } @@ -163,17 +170,24 @@ const SelectPriceRangeCustom: React.FC = ({ selectPool.selectFullRange(); }, [selectPool]); - function initPriceRange(inputPriceRangeType?: PriceRangeType | null, defaultPriceRange: [number | null, number | null] = [null, null]) { + function initPriceRange(inputPriceRangeType?: PriceRangeType | null) { const currentPriceRangeType = inputPriceRangeType || priceRangeType; const currentPrice = selectPool.isCreate ? selectPool.startPrice : selectPool.currentPrice; - const [defaultMinPrice, defaultMaxPrice] = defaultPriceRange; + const [defaultMinPrice, defaultMaxPrice] = defaultPriceRangeRef?.current ?? [null, null]; + + if (inputPriceRangeType === "Custom" && defaultMinPrice && defaultMinPrice) { + selectPool.setMinPosition(defaultMinPrice); + selectPool.setMaxPosition(defaultMaxPrice); + return; + } if (currentPrice && selectPool.feeTier && currentPriceRangeType) { const priceRange = SwapFeeTierPriceRange[selectPool.feeTier][currentPriceRangeType]; const minRateAmount = currentPrice * (priceRange.min / 100); const maxRateAmount = currentPrice * (priceRange.max / 100); - selectPool.setMinPosition(defaultMinPrice || currentPrice + minRateAmount); - selectPool.setMaxPosition(defaultMaxPrice || currentPrice + maxRateAmount); + selectPool.setMinPosition(currentPrice + minRateAmount); + selectPool.setMaxPosition(currentPrice + maxRateAmount); + return; } } @@ -181,9 +195,10 @@ const SelectPriceRangeCustom: React.FC = ({ adjustFn(); } - function resetRange(priceRangeType?: PriceRangeType | null, defaultPriceRange?: [number | null, number | null]) { + function resetRange(priceRangeType?: PriceRangeType | null) { + // Reset zoom, min, max, full range selectPool.resetRange(); - initPriceRange(priceRangeType, defaultPriceRange); + initPriceRange(priceRangeType); defaultScaleX.domain(getScaleRange()); scaleX.domain(defaultScaleX.domain()); } @@ -229,8 +244,8 @@ const SelectPriceRangeCustom: React.FC = ({ }, [tokenA]); useEffect(() => { - resetRange(priceRangeType, defaultPriceRange); - }, [selectPool.poolPath, selectPool.feeTier, priceRangeType, selectPool.startPrice, defaultPriceRange]); + resetRange(priceRangeType); + }, [selectPool.poolPath, selectPool.feeTier, priceRangeType, selectPool.startPrice]); useEffect(() => { if (!selectPool.poolPath) { @@ -386,8 +401,10 @@ const SelectPriceRangeCustom: React.FC = ({
{ - setPriceRange(); - // resetRange(); + setPriceRange(defaultPriceRangeType); + if(priceRangeType === defaultPriceRangeType) { + resetRange(defaultPriceRangeType); + } }}> Reset Range diff --git a/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx b/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx index 808923222..7a4f1e6e5 100644 --- a/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx +++ b/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx @@ -24,7 +24,8 @@ interface SelectPriceRangeProps { isEmptyLiquidity: boolean; isKeepToken: boolean; setPriceRange: (type?: PriceRangeType) => void; - defaultPriceRange?: [number | null, number | null]; + defaultPriceRangeRef?: React.MutableRefObject<[number | null, number | null] | undefined>; + defaultPriceRangeType: PriceRangeType; } const SelectPriceRange: React.FC = ({ @@ -42,7 +43,8 @@ const SelectPriceRange: React.FC = ({ isEmptyLiquidity, isKeepToken, setPriceRange, - defaultPriceRange, + defaultPriceRangeRef, + defaultPriceRangeType, }) => { const selectedTokenPair = true; @@ -77,7 +79,8 @@ const SelectPriceRange: React.FC = ({ isEmptyLiquidity={isEmptyLiquidity} isKeepToken={isKeepToken} setPriceRange={setPriceRange} - defaultPriceRange={defaultPriceRange} + defaultPriceRangeRef={defaultPriceRangeRef} + defaultPriceRangeType={defaultPriceRangeType} /> )} diff --git a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx index f7a4e3372..b316221bf 100644 --- a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx +++ b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx @@ -60,7 +60,8 @@ interface EarnAddLiquidityProps { handleSwapValue: () => void; isKeepToken: boolean; setPriceRange: (type?: PriceRangeType) => void; - defaultPriceRange?: [number | null, number | null]; + defaultPriceRangeRef?: React.MutableRefObject<[number | null, number | null] | undefined>; + defaultPriceRangeType: PriceRangeType; } const EarnAddLiquidity: React.FC = ({ @@ -96,7 +97,8 @@ const EarnAddLiquidity: React.FC = ({ handleSwapValue, isKeepToken, setPriceRange, - defaultPriceRange, + defaultPriceRangeRef, + defaultPriceRangeType, }) => { const [openedSelectPair] = useState(isEarnAdd ? true : false); const [openedFeeTier, setOpenedFeeTier] = useState(false); @@ -314,7 +316,8 @@ const EarnAddLiquidity: React.FC = ({ isEmptyLiquidity={isEmptyObject(feetierOfLiquidityMap)} isKeepToken={isKeepToken} setPriceRange={setPriceRange} - defaultPriceRange={defaultPriceRange} + defaultPriceRangeRef={defaultPriceRangeRef} + defaultPriceRangeType={defaultPriceRangeType} /> {selectedPriceRange && existTokenPair && selectedFeeRate && !showDim && } {!isLoading && isShowOutRange && diff --git a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx index a0b759f3d..7f77e475b 100644 --- a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx +++ b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx @@ -495,8 +495,6 @@ const EarnAddLiquidityContainer: React.FC = () => { // } // }, [swapFeeTier, tokenA, tokenB, selectPool.minPosition, selectPool.maxPosition, priceRange?.type]); - console.log("🚀 ~ selectPool.isChangeMinMax:", selectPool.isChangeMinMax); - return ( { /// Update with provided price range, if receive undefine set to default price range setPriceRange={(type) => { setPriceRange(PRICE_RANGES.find(item => item.type === (type || "Passive")) ?? null); - } } + }} + defaultPriceRangeType={"Passive"} /> ); }; diff --git a/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx b/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx index 65246ceec..d81cfd10c 100644 --- a/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx +++ b/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; +import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import EarnAddLiquidity from "@components/earn-add/earn-add-liquidity/EarnAddLiquidity"; import { AddLiquiditySubmitType, @@ -76,7 +76,8 @@ const EarnAddLiquidityContainer: React.FC = () => { return PRICE_RANGES.find(item => item.type === ("Custom")) ?? null; }); const [defaultPrice, setDefaultPrice] = useState(null); - + const defaultPriceRangeRef = useRef<[number | null, number | null]>(); + const { openModal: openConnectWalletModal } = useConnectWalletModal(); const { @@ -94,10 +95,10 @@ const EarnAddLiquidityContainer: React.FC = () => { feeTier: swapFeeTier, isCreate: createOption?.isCreate, startPrice: createOption?.startPrice, - defaultPriceRange: [ - tickLower ? tickToPrice(Number(tickLower)) : null, - tickUpper ? tickToPrice(Number(tickUpper)) : null - ], + // defaultPriceRange: [ + // tickLower ? tickToPrice(Number(tickLower)) : null, + // tickUpper ? tickToPrice(Number(tickUpper)) : null + // ], }); const { updatePools } = usePoolData(); const { pools, feetierOfLiquidityMap, createPool, addLiquidity, fetching } = usePool({ tokenA, tokenB, compareToken: selectPool.compareToken }); @@ -123,6 +124,16 @@ const EarnAddLiquidityContainer: React.FC = () => { addLiquidity, }); + useEffect(() => { + if(router.isReady && !defaultPriceRangeRef.current) { + defaultPriceRangeRef.current = [ + tickLower ? tickToPrice(Number(tickLower)) : null, + tickUpper ? tickToPrice(Number(tickUpper)) : null + ]; + console.log(defaultPriceRangeRef.current); + } + }, [router.isReady, tickLower, tickUpper]); + const priceRangeSummary: PriceRangeSummary = useMemo(() => { let depositRatio = "-"; let feeBoost: string | null = null; @@ -423,24 +434,16 @@ const EarnAddLiquidityContainer: React.FC = () => { }); }, [swapValue, setSwapValue, isKeepToken]); - // useEffect(() => { - // selectPool.resetRange(); - // const queryString = makeQueryString({ - // tickLower: isNumber(selectPool.minPosition || "") ? priceToTick(selectPool.minPosition || 0) : null, - // tickUpper: isNumber(selectPool.maxPosition || "") ? priceToTick(selectPool.maxPosition || 0) : null, - // }); - // if (tokenA?.path && tokenB?.path) { - // router.push(`/earn/pool/${router.query["pool-path"]}/add?${queryString}`, undefined, { shallow: true }); - // } - // }, [tickLower, tickUpper]); - - useEffect(() => { if (selectPool.isChangeMinMax) { setPriceRange({ type: "Custom" }); } }, [selectPool.isChangeMinMax]); + useEffect(() => { + selectPool.setIsChangeMinMax(priceRange?.type === "Custom"); + }, [priceRange?.type]); + return ( { handleSwapValue={handleSwapValue} isKeepToken={isKeepToken} setPriceRange={(type) => setPriceRange(PRICE_RANGES.find(item => item.type === (type || ("Custom"))) ?? null)} - defaultPriceRange={[ - tickLower ? tickToPrice(Number(tickLower)) : null, - tickUpper ? tickToPrice(Number(tickUpper)) : null - ]} + defaultPriceRangeRef={defaultPriceRangeRef} + defaultPriceRangeType={"Custom"} /> ); }; diff --git a/packages/web/src/hooks/pool/use-select-pool.tsx b/packages/web/src/hooks/pool/use-select-pool.tsx index 840bd5db3..f9edf3dda 100644 --- a/packages/web/src/hooks/pool/use-select-pool.tsx +++ b/packages/web/src/hooks/pool/use-select-pool.tsx @@ -1,6 +1,6 @@ import { SwapFeeTierInfoMap, SwapFeeTierMaxPriceRangeMap, SwapFeeTierType } from "@constants/option.constant"; import { isNativeToken, TokenModel } from "@models/token/token-model"; -import { useCallback, useEffect, useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useGnoswapContext } from "@hooks/common/use-gnoswap-context"; import { feeBoostRateByPrices, priceToNearTick, tickToPrice } from "@utils/swap-utils"; import { PoolDetailRPCModel } from "@models/pool/pool-detail-rpc-model"; @@ -65,9 +65,9 @@ export const useSelectPool = ({ feeTier, isCreate = false, startPrice = null, - defaultPriceRange, + defaultPriceRange = [null, null], }: Props) => { - const [ defaultMinPosition, defaultMaxPosition ] = defaultPriceRange ?? [null, null]; + const priceRangeRef = useRef<[number | null, number | null]>([...defaultPriceRange]); // const isInitialedPriceRange = useRef(false); const [, setCurrentPoolPath] = useAtom(EarnState.currentPoolPath); @@ -85,13 +85,9 @@ export const useSelectPool = ({ const [isChangeMinMax, setIsChangeMinMax] = useState(false); const { isLoadingCommon } = useLoading(); - // useEffect(() => { - // if(defaultMinPosition && defaultMaxPosition && isInitialedPriceRange.current === false) { - // setMinPosition(defaultMinPosition); - // setMaxPosition(defaultMaxPosition); - // isInitialedPriceRange.current = true; - // } - // }, []); + useEffect(() => { + priceRangeRef.current = [...defaultPriceRange]; + }, [defaultPriceRange]); const poolPath = useMemo(() => { setCurrentPoolPath(latestPoolPath); @@ -277,6 +273,8 @@ export const useSelectPool = ({ }, [maxPosition, poolInfo, interactionType]); const resetRange = useCallback(() => { + const [defaultMinPosition, defaultMaxPosition] = priceRangeRef.current; + excuteInteraction(() => { setZoomLevel(9); setFullRange(false); From ddde19a6852b6ba5a5d3c76b538af530bbe8e76b Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Wed, 24 Apr 2024 16:30:40 +0700 Subject: [PATCH 04/37] bugfix: lost param issue --- .../SelectPriceRangeCustom.tsx | 32 ++++----- .../select-price-range/SelectPriceRange.tsx | 13 ++-- .../earn-add-liquidity/EarnAddLiquidity.tsx | 12 ++-- .../pool/my-position-card/MyPositionCard.tsx | 2 +- .../EarnAddLiquidityContainer.tsx | 59 ++++++++-------- .../PoolAddLiquidityContainer.tsx | 70 ++++++++++++------- 6 files changed, 108 insertions(+), 80 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx index 307a45e7a..003ed23c8 100644 --- a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx +++ b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx @@ -25,6 +25,7 @@ import { useLoading } from "@hooks/common/use-loading"; import { useGnotToGnot } from "@hooks/token/use-gnot-wugnot"; import ExchangeRate from "../exchange-rate/ExchangeRate"; import { subscriptFormat } from "@utils/number-utils"; +import { DefaultTick } from "@containers/pool-add-liquidity-container/PoolAddLiquidityContainer"; export interface SelectPriceRangeCustomProps { tokenA: TokenModel; @@ -39,7 +40,8 @@ export interface SelectPriceRangeCustomProps { isKeepToken: boolean; setPriceRange: (type?: PriceRangeType) => void; defaultPriceRangeRef?: React.MutableRefObject<(number | null)[] | undefined>; - defaultPriceRangeType: PriceRangeType; + resetPriceRangeTypeTarget: PriceRangeType; + defaultTicks?: DefaultTick; } const SelectPriceRangeCustom: React.FC = ({ @@ -53,9 +55,9 @@ const SelectPriceRangeCustom: React.FC = ({ handleSwapValue, isEmptyLiquidity, isKeepToken, - defaultPriceRangeType, - defaultPriceRangeRef, - setPriceRange + resetPriceRangeTypeTarget, + setPriceRange, + defaultTicks, }) => { // const { tickUpper, tickLower } = router?.query; @@ -69,14 +71,11 @@ const SelectPriceRangeCustom: React.FC = ({ function getPriceRange(price?: number | null) { const currentPriceRangeType = priceRangeType; const currentPrice = price || selectPool.currentPrice || 1; - console.log("🚀 ~ getPriceRange ~ currentPrice:", currentPrice); if (!selectPool.feeTier || !currentPriceRangeType) { return [0, currentPrice * 2]; } const visibleRate = SwapFeeTierPriceRange[selectPool.feeTier][currentPriceRangeType].max / 100; - console.log("🚀 ~ getPriceRange ~ visibleRate:", visibleRate); const range = currentPrice * visibleRate; - console.log("🚀 ~ getPriceRange ~ range:", range); return [currentPrice - range, currentPrice + range]; } @@ -85,8 +84,6 @@ const SelectPriceRangeCustom: React.FC = ({ const currentPrice = selectPool.currentPrice || 1; const [min, max] = getPriceRange(); const rangeGap = max - min; - console.log("🚀 ~ getScaleRange ~ min:", min); - console.log("🚀 ~ getScaleRange ~ max:", max); return [currentPrice - rangeGap, currentPrice + rangeGap]; } @@ -170,17 +167,18 @@ const SelectPriceRangeCustom: React.FC = ({ selectPool.selectFullRange(); }, [selectPool]); + function initPriceRange(inputPriceRangeType?: PriceRangeType | null) { const currentPriceRangeType = inputPriceRangeType || priceRangeType; const currentPrice = selectPool.isCreate ? selectPool.startPrice : selectPool.currentPrice; - const [defaultMinPrice, defaultMaxPrice] = defaultPriceRangeRef?.current ?? [null, null]; + const {tickLower, tickUpper} = defaultTicks ?? {}; - if (inputPriceRangeType === "Custom" && defaultMinPrice && defaultMinPrice) { - selectPool.setMinPosition(defaultMinPrice); - selectPool.setMaxPosition(defaultMaxPrice); + + if (inputPriceRangeType === "Custom" && tickLower && tickUpper) { + selectPool.setMinPosition(tickLower); + selectPool.setMaxPosition(tickUpper); return; } - if (currentPrice && selectPool.feeTier && currentPriceRangeType) { const priceRange = SwapFeeTierPriceRange[selectPool.feeTier][currentPriceRangeType]; const minRateAmount = currentPrice * (priceRange.min / 100); @@ -401,9 +399,9 @@ const SelectPriceRangeCustom: React.FC = ({
{ - setPriceRange(defaultPriceRangeType); - if(priceRangeType === defaultPriceRangeType) { - resetRange(defaultPriceRangeType); + if(priceRangeType !== resetPriceRangeTypeTarget) { + setPriceRange(resetPriceRangeTypeTarget); + resetRange(resetPriceRangeTypeTarget); } }}> diff --git a/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx b/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx index 7a4f1e6e5..ac8a3f325 100644 --- a/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx +++ b/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx @@ -8,6 +8,7 @@ import { AddLiquidityPriceRage } from "@containers/earn-add-liquidity-container/ import SelectPriceRangeCustom from "../select-price-range-custom/SelectPriceRangeCustom"; import { TokenModel } from "@models/token/token-model"; import { SelectPool } from "@hooks/pool/use-select-pool"; +import { DefaultTick } from "@containers/pool-add-liquidity-container/PoolAddLiquidityContainer"; interface SelectPriceRangeProps { opened: boolean; @@ -25,7 +26,8 @@ interface SelectPriceRangeProps { isKeepToken: boolean; setPriceRange: (type?: PriceRangeType) => void; defaultPriceRangeRef?: React.MutableRefObject<[number | null, number | null] | undefined>; - defaultPriceRangeType: PriceRangeType; + resetPriceRangeTypeTarget: PriceRangeType; + defaultTicks?: DefaultTick; } const SelectPriceRange: React.FC = ({ @@ -43,8 +45,8 @@ const SelectPriceRange: React.FC = ({ isEmptyLiquidity, isKeepToken, setPriceRange, - defaultPriceRangeRef, - defaultPriceRangeType, + resetPriceRangeTypeTarget, + defaultTicks, }) => { const selectedTokenPair = true; @@ -79,8 +81,9 @@ const SelectPriceRange: React.FC = ({ isEmptyLiquidity={isEmptyLiquidity} isKeepToken={isKeepToken} setPriceRange={setPriceRange} - defaultPriceRangeRef={defaultPriceRangeRef} - defaultPriceRangeType={defaultPriceRangeType} + defaultTicks={defaultTicks} + resetPriceRangeTypeTarget={resetPriceRangeTypeTarget} + /> )} diff --git a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx index b316221bf..4e04431bc 100644 --- a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx +++ b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx @@ -22,6 +22,7 @@ import { SelectPool } from "@hooks/pool/use-select-pool"; import IconFailed from "@components/common/icons/IconFailed"; import { isEmptyObject } from "@utils/validation-utils"; import { useLoading } from "@hooks/common/use-loading"; +import { DefaultTick } from "@containers/pool-add-liquidity-container/PoolAddLiquidityContainer"; interface EarnAddLiquidityProps { mode: AddLiquidityType; @@ -61,7 +62,8 @@ interface EarnAddLiquidityProps { isKeepToken: boolean; setPriceRange: (type?: PriceRangeType) => void; defaultPriceRangeRef?: React.MutableRefObject<[number | null, number | null] | undefined>; - defaultPriceRangeType: PriceRangeType; + resetPriceRangeTypeTarget: PriceRangeType; + defaultTicks?: DefaultTick; } const EarnAddLiquidity: React.FC = ({ @@ -97,8 +99,8 @@ const EarnAddLiquidity: React.FC = ({ handleSwapValue, isKeepToken, setPriceRange, - defaultPriceRangeRef, - defaultPriceRangeType, + defaultTicks, + resetPriceRangeTypeTarget, }) => { const [openedSelectPair] = useState(isEarnAdd ? true : false); const [openedFeeTier, setOpenedFeeTier] = useState(false); @@ -316,8 +318,8 @@ const EarnAddLiquidity: React.FC = ({ isEmptyLiquidity={isEmptyObject(feetierOfLiquidityMap)} isKeepToken={isKeepToken} setPriceRange={setPriceRange} - defaultPriceRangeRef={defaultPriceRangeRef} - defaultPriceRangeType={defaultPriceRangeType} + defaultTicks={defaultTicks} + resetPriceRangeTypeTarget={resetPriceRangeTypeTarget} /> {selectedPriceRange && existTokenPair && selectedFeeRate && !showDim && } {!isLoading && isShowOutRange && diff --git a/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx b/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx index 1436fa45c..b93780772 100644 --- a/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx +++ b/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx @@ -554,7 +554,7 @@ const MyPositionCard: React.FC = ({ />
-
}
- = ({ currentPriceStr={currentPriceStr} setIsChangeMinMax={selectPool.setIsChangeMinMax} priceRangeType={priceRangeType} + ref={minPriceRangeCustomRef} /> - = ({ currentPriceStr={currentPriceStrReverse} setIsChangeMinMax={selectPool.setIsChangeMinMax} priceRangeType={priceRangeType} + ref={maxPriceRangeCustomRef} />
@@ -424,6 +441,8 @@ const SelectPriceRangeCustom: React.FC = ({ ); -}; +}); + +SelectPriceRangeCustom.displayName = "SelectPriceRangeCustom"; export default SelectPriceRangeCustom; \ No newline at end of file diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index 7db7d74f3..f920be727 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -12,6 +12,8 @@ import React, { useMemo, useState, useRef, + forwardRef, + useImperativeHandle, } from "react"; import { SelectPriceRangeCutomControllerWrapper } from "./SelectPriceRangeCutomController.styles"; import IconAdd from "../icons/IconAdd"; @@ -36,9 +38,14 @@ export interface SelectPriceRangeCutomControllerProps { priceRangeType: PriceRangeType | null; } -const SelectPriceRangeCutomController: React.FC< +export interface SelectPriceRangeCustomControllerRef { + formatData: () => void; +} + +const SelectPriceRangeCustomController = forwardRef< + SelectPriceRangeCustomControllerRef, SelectPriceRangeCutomControllerProps -> = ({ +>(({ title, current, feeTier, @@ -52,7 +59,7 @@ const SelectPriceRangeCutomController: React.FC< priceRangeType, token0Symbol, token1Symbol, -}) => { +}, ref) => { const divRef = useRef(null); const inputRef = useRef(null); const [value, setValue] = useState(""); @@ -126,6 +133,10 @@ const SelectPriceRangeCutomController: React.FC< } }, [changed, value, tickSpacing, selectedFullRange, priceRangeType]); + useImperativeHandle(ref, () => { + return { formatData: () => setCurrentValue("") }; + }, []); + useEffect(() => { if (current === null || BigNumber(Number(current)).isNaN()) { setValue("-"); @@ -245,5 +256,8 @@ const SelectPriceRangeCutomController: React.FC<
); -}; -export default SelectPriceRangeCutomController; +}); + +SelectPriceRangeCustomController.displayName = "SelectPriceRangeCustomController"; + +export default SelectPriceRangeCustomController; diff --git a/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx b/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx index ac8a3f325..b85374127 100644 --- a/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx +++ b/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx @@ -1,5 +1,5 @@ import { PriceRangeStr, PriceRangeTooltip, PriceRangeType } from "@constants/option.constant"; -import React, { useCallback, useMemo } from "react"; +import React, { useCallback, useMemo, useRef } from "react"; import IconInfo from "@components/common/icons/IconInfo"; import IconStrokeArrowRight from "@components/common/icons/IconStrokeArrowRight"; import Tooltip from "@components/common/tooltip/Tooltip"; @@ -48,10 +48,12 @@ const SelectPriceRange: React.FC = ({ resetPriceRangeTypeTarget, defaultTicks, }) => { + const selectPriceRangeRef= useRef>(null); const selectedTokenPair = true; const changePriceRangeWithClear = useCallback((priceRange: AddLiquidityPriceRage) => { changePriceRange(priceRange); + selectPriceRangeRef.current?.resetRange(priceRange.type); }, [changePriceRange]); return ( @@ -83,7 +85,7 @@ const SelectPriceRange: React.FC = ({ setPriceRange={setPriceRange} defaultTicks={defaultTicks} resetPriceRangeTypeTarget={resetPriceRangeTypeTarget} - + ref={selectPriceRangeRef} /> )} diff --git a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx index 94eda63a1..3b5f26a23 100644 --- a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx +++ b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx @@ -202,6 +202,7 @@ const EarnAddLiquidityContainer: React.FC = () => { setPriceRange(priceRange); if (priceRange.type !== "Custom") { selectPool.setIsChangeMinMax(false); + selectPool.setFullRange(false); } }, []); diff --git a/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx b/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx index c82d6c373..d3e4083a9 100644 --- a/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx +++ b/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx @@ -208,6 +208,10 @@ const EarnAddLiquidityContainer: React.FC = () => { const changePriceRange = useCallback((priceRange: AddLiquidityPriceRage) => { setPriceRange(priceRange); + if (priceRange.type !== "Custom") { + selectPool.setIsChangeMinMax(false); + selectPool.setFullRange(false); + } }, []); const changeTokenA = useCallback((token: TokenModel) => { diff --git a/packages/web/src/hooks/pool/use-select-pool.tsx b/packages/web/src/hooks/pool/use-select-pool.tsx index a19008322..f8dc6d333 100644 --- a/packages/web/src/hooks/pool/use-select-pool.tsx +++ b/packages/web/src/hooks/pool/use-select-pool.tsx @@ -77,8 +77,6 @@ export const useSelectPool = ({ defaultPriceRange = [null, null], }: Props) => { const priceRangeRef = useRef<[number | null, number | null]>([...defaultPriceRange]); - // const isInitialedPriceRange = useRef(false); - const [, setCurrentPoolPath] = useAtom(EarnState.currentPoolPath); const [fullRange, setFullRange] = useState(false); const [focusPosition, setFocusPosition] = useState(0); @@ -396,7 +394,6 @@ export const useSelectPool = ({ tickUpper: position.tickLower * -1, })), }; - console.log(changedPoolInfo); setPoolInfo(changedPoolInfo); }) .catch(() => setPoolInfo(null)); diff --git a/packages/web/src/hooks/token/use-earn-add-liquidity-confirm-modal.tsx b/packages/web/src/hooks/token/use-earn-add-liquidity-confirm-modal.tsx index a2ddfca0b..209da5db4 100644 --- a/packages/web/src/hooks/token/use-earn-add-liquidity-confirm-modal.tsx +++ b/packages/web/src/hooks/token/use-earn-add-liquidity-confirm-modal.tsx @@ -213,12 +213,14 @@ export const useEarnAddLiquidityConfirmModal = ({ maxTick = priceToNearTick(selectPool.maxPrice, selectPool.tickSpacing); } } + broadcastLoading(makeBroadcastAddLiquidityMessage("pending", { tokenASymbol: tokenA.symbol, tokenBSymbol: tokenB.symbol, tokenAAmount: Number(tokenAAmount).toLocaleString("en-US", { maximumFractionDigits: 6}), tokenBAmount: Number(tokenBAmount).toLocaleString("en-US", { maximumFractionDigits: 6}) })); + const transaction = selectPool.isCreate ? createPool({ tokenAAmount, tokenBAmount, From 2114a082529dcaca93c5449cea6392fc880cc962 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Fri, 26 Apr 2024 14:57:38 +0700 Subject: [PATCH 08/37] bugfix: input range by typing ui issue --- .../select-price-range-custom/SelectPriceRangeCustom.tsx | 8 ++++---- .../SelectPriceRangeCustomPosition.tsx | 6 +++--- .../SelectPriceRangeCutomController.tsx | 6 +++--- .../earn-add/earn-add-liquidity/EarnAddLiquidity.tsx | 2 +- packages/web/src/hooks/pool/use-select-pool.tsx | 6 +++--- 5 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx index 6f9623f4f..d485e93c9 100644 --- a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx +++ b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx @@ -109,9 +109,9 @@ const SelectPriceRangeCustom = forwardRef selectPool.renderState === "LOADING", [selectPool.renderState]); + const isLoading = useMemo(() => selectPool.renderState() === "LOADING", [selectPool.renderState]); - const availSelect = Array.isArray(selectPool.liquidityOfTickPoints) && selectPool.renderState === "DONE"; + const availSelect = Array.isArray(selectPool.liquidityOfTickPoints) && selectPool.renderState() === "DONE"; const comparedTokenA = selectPool.compareToken?.symbol !== tokenB.symbol; @@ -276,7 +276,7 @@ const SelectPriceRangeCustom = forwardRef; } @@ -341,7 +341,7 @@ const SelectPriceRangeCustom = forwardRef )} - {isLoading && ( + {(selectPool.renderState(true) === "LOADING") && (
diff --git a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustomPosition.tsx b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustomPosition.tsx index afd0343ae..4255cd37c 100644 --- a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustomPosition.tsx +++ b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustomPosition.tsx @@ -94,13 +94,13 @@ const SelectPriceRangeCustom: React.FC = ({ const isCustom = true; const isLoading = useMemo( - () => selectPool.renderState === "LOADING" || isLoadingCommon, + () => selectPool.renderState() === "LOADING" || isLoadingCommon, [selectPool.renderState, isLoadingCommon], ); const availSelect = Array.isArray(selectPool.liquidityOfTickPoints) && - selectPool.renderState === "DONE"; + selectPool.renderState() === "DONE"; const comparedTokenA = selectPool.compareToken?.symbol !== tokenB.symbol; @@ -219,7 +219,7 @@ const SelectPriceRangeCustom: React.FC = ({ } }, [selectPool.currentPrice, selectPool.startPrice]); - if (selectPool.renderState === "NONE") { + if (selectPool.renderState() === "NONE") { return <>; } diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index f920be727..2af2c74d3 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -184,7 +184,7 @@ const SelectPriceRangeCustomController = forwardRef< ? subscriptFormat(value) : value === "∞" ? value - : convertToKMB(Number(value).toFixed(4), 4); + : Number(value).toFixed(5); const priceValueString = ( <> 1 {token0Symbol} = {exchangePrice} {token1Symbol} @@ -213,7 +213,7 @@ const SelectPriceRangeCustomController = forwardRef< className="value" value={ isNumber(currentValue) && Number(currentValue) > 1 - ? convertToKMB(Number(value).toFixed(4), 4) + ? Number(value).toFixed(5) : currentValue ? subscriptFormat(currentValue) : value === "NaN" @@ -231,7 +231,7 @@ const SelectPriceRangeCustomController = forwardRef< ref={divRef} > {isNumber(currentValue) && Number(currentValue) > 1 - ? convertToKMB(Number(value).toFixed(4), 4) + ? convertToKMB(Number(value).toFixed(4)) : currentValue ? subscriptFormat(currentValue) : value} diff --git a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx index 4e04431bc..da73307e7 100644 --- a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx +++ b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx @@ -234,7 +234,7 @@ const EarnAddLiquidity: React.FC = ({ const { minPrice, maxPrice, currentPrice } = selectPool; return ((minPrice || 0) > (currentPrice || 0) && (maxPrice || 0) > (currentPrice || 0)) || ((minPrice || 0) < (currentPrice || 0) && (maxPrice || 0) < (currentPrice || 0)); }, [selectPool, tokenA, tokenB]); - const isLoading = useMemo(() => selectPool.renderState === "LOADING" || isLoadingCommon, [selectPool.renderState, isLoadingCommon]); + const isLoading = useMemo(() => selectPool.renderState() === "LOADING" || isLoadingCommon, [selectPool.renderState, isLoadingCommon]); return ( diff --git a/packages/web/src/hooks/pool/use-select-pool.tsx b/packages/web/src/hooks/pool/use-select-pool.tsx index f8dc6d333..57b96f66e 100644 --- a/packages/web/src/hooks/pool/use-select-pool.tsx +++ b/packages/web/src/hooks/pool/use-select-pool.tsx @@ -31,7 +31,7 @@ interface Props { export interface SelectPool { poolPath: string | null; isCreate: boolean; - renderState: RenderState; + renderState: (isIgnoreDefaultLoading?: boolean) => RenderState; startPrice: number | null; feeTier: SwapFeeTierType | null; tickSpacing: number; @@ -102,14 +102,14 @@ export const useSelectPool = ({ return latestPoolPath; }, [latestPoolPath, setCurrentPoolPath]); - const renderState: RenderState = useMemo(() => { + const renderState = useCallback((isIgnoreDefaultLoading = false) => { if (!tokenA || !tokenB || !feeTier) { return "NONE"; } if (isCreate && startPrice === null) { return "CREATE"; } - if (!poolInfo || isLoadingCommon) { + if (!poolInfo || (!isIgnoreDefaultLoading && isLoadingCommon)) { return "LOADING"; } return "DONE"; From 5912db0d69dd8bfbc227e5b75320ffd4aa2cbcb4 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Fri, 26 Apr 2024 18:22:55 +0700 Subject: [PATCH 09/37] bugfix: input range by typing ui issue --- .../SelectPriceRangeCutomController.tsx | 30 ++++++++++++------- .../web/src/hooks/pool/use-select-pool.tsx | 14 +++++++-- packages/web/src/utils/number-utils.ts | 5 ++++ packages/web/src/utils/swap-utils.ts | 2 ++ 4 files changed, 38 insertions(+), 13 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index 2af2c74d3..2829382c4 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -9,11 +9,11 @@ import BigNumber from "bignumber.js"; import React, { useCallback, useEffect, - useMemo, useState, useRef, forwardRef, useImperativeHandle, + useMemo, } from "react"; import { SelectPriceRangeCutomControllerWrapper } from "./SelectPriceRangeCutomController.styles"; import IconAdd from "../icons/IconAdd"; @@ -191,6 +191,24 @@ const SelectPriceRangeCustomController = forwardRef< ); + const transformValue = useCallback(() => { + if(isNumber(currentValue) && Number(currentValue) > 1) { + return Number(value).toFixed(5); + } + + if(currentValue) { + return subscriptFormat(currentValue); + } + + if(value === "NaN") { + return "-"; + } + + // console.log("value"); + + return value; + }, [currentValue, value]); + return ( {title} @@ -211,15 +229,7 @@ const SelectPriceRangeCustomController = forwardRef< 1 - ? Number(value).toFixed(5) - : currentValue - ? subscriptFormat(currentValue) - : value === "NaN" - ? "-" - : value - } + value={transformValue()} onChange={onChangeValue} onBlur={onBlurUpdate} ref={inputRef} diff --git a/packages/web/src/hooks/pool/use-select-pool.tsx b/packages/web/src/hooks/pool/use-select-pool.tsx index 57b96f66e..8bbded53e 100644 --- a/packages/web/src/hooks/pool/use-select-pool.tsx +++ b/packages/web/src/hooks/pool/use-select-pool.tsx @@ -91,6 +91,7 @@ export const useSelectPool = ({ "NONE" | "INTERACTION" | "TICK_UPDATE" | "FINISH" >("NONE"); const [isChangeMinMax, setIsChangeMinMax] = useState(false); + const [loadingPoolInfo , setLoadingPoolInfo] = useState(false); const { isLoadingCommon } = useLoading(); useEffect(() => { @@ -109,18 +110,18 @@ export const useSelectPool = ({ if (isCreate && startPrice === null) { return "CREATE"; } - if (!poolInfo || (!isIgnoreDefaultLoading && isLoadingCommon)) { + if ( loadingPoolInfo || (!isIgnoreDefaultLoading && isLoadingCommon)) { return "LOADING"; } return "DONE"; }, [ feeTier, isCreate, - poolInfo, startPrice, tokenA, tokenB, isLoadingCommon, + loadingPoolInfo ]); const liquidityOfTickPoints: [number, number][] = useMemo(() => { @@ -376,9 +377,11 @@ export const useSelectPool = ({ } return false; }) === 1; + setLoadingPoolInfo(true); poolRepository .getPoolDetailRPCByPoolPath(poolPath) .then(poolInfo => { + const changedPoolInfo = reverse === false ? poolInfo @@ -396,7 +399,12 @@ export const useSelectPool = ({ }; setPoolInfo(changedPoolInfo); }) - .catch(() => setPoolInfo(null)); + .catch(() => { + setPoolInfo(null); + }) + .finally(() => { + setLoadingPoolInfo(false); + }); }, [ feeTier, tokenA, diff --git a/packages/web/src/utils/number-utils.ts b/packages/web/src/utils/number-utils.ts index 85f67a039..c71b87ff8 100644 --- a/packages/web/src/utils/number-utils.ts +++ b/packages/web/src/utils/number-utils.ts @@ -301,6 +301,11 @@ export function subscriptFormat(number: string | number) { const numberOfZero = countZeros(numberStr); if (numberStr[0] !== "0" || !numberStr.startsWith("0.00000")) { if (Number(number) < 1) { + if(numberOfZero === 5) { + console.log(Math.min(10, numberStr.length)); + return Number(numberStr).toFixed(Math.min(9, numberStr.length)); + } + return removeTrailingZeros(Number(numberStr).toFixed(Math.min(numberOfZero - 1 + 5, 5))); } else { return removeTrailingZeros(Number(numberStr).toFixed(5)); diff --git a/packages/web/src/utils/swap-utils.ts b/packages/web/src/utils/swap-utils.ts index fd19cd176..669dbdebf 100644 --- a/packages/web/src/utils/swap-utils.ts +++ b/packages/web/src/utils/swap-utils.ts @@ -53,7 +53,9 @@ export function findNearPrice(price: number, tickSpacing: number) { const previouTickAbs = tickAbs - mod; const nextTickAbs = tickAbs - mod + tickSpacing; const previousPrice = tickToPrice(previouTickAbs * sign); + console.log("🚀 ~ findNearPrice ~ previousPrice:", previousPrice); const nextPrice = tickToPrice(nextTickAbs * sign); + console.log("🚀 ~ findNearPrice ~ nextPrice:", nextPrice); if ( Math.abs(previousPrice - currentPrice) > Math.abs(nextPrice - currentPrice) From 84fbac83b9536e1109766158cc291ab74d33ac50 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Sat, 27 Apr 2024 21:08:10 +0700 Subject: [PATCH 10/37] fix: price controller format --- .../SelectPriceRangeCutomController.tsx | 2 -- packages/web/src/utils/number-utils.ts | 3 +-- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index 2829382c4..c26b819e3 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -204,8 +204,6 @@ const SelectPriceRangeCustomController = forwardRef< return "-"; } - // console.log("value"); - return value; }, [currentValue, value]); diff --git a/packages/web/src/utils/number-utils.ts b/packages/web/src/utils/number-utils.ts index c71b87ff8..8cdd9f4b4 100644 --- a/packages/web/src/utils/number-utils.ts +++ b/packages/web/src/utils/number-utils.ts @@ -302,8 +302,7 @@ export function subscriptFormat(number: string | number) { if (numberStr[0] !== "0" || !numberStr.startsWith("0.00000")) { if (Number(number) < 1) { if(numberOfZero === 5) { - console.log(Math.min(10, numberStr.length)); - return Number(numberStr).toFixed(Math.min(9, numberStr.length)); + return removeTrailingZeros(Number(numberStr).toFixed(Math.min(9, numberStr.length))); } return removeTrailingZeros(Number(numberStr).toFixed(Math.min(numberOfZero - 1 + 5, 5))); From 621522e5e0651e141aecc04da8ed6bb26462d872 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Sun, 28 Apr 2024 00:29:10 +0700 Subject: [PATCH 11/37] fix: price controller format, unexpected out range --- .../SelectPriceRangeCutomController.tsx | 54 +++++++++++-------- .../use-earn-add-liquidity-confirm-modal.tsx | 2 +- packages/web/src/utils/swap-utils.ts | 2 - 3 files changed, 32 insertions(+), 26 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index c26b819e3..287bfc291 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -66,6 +66,7 @@ const SelectPriceRangeCustomController = forwardRef< const [changed, setChanged] = useState(false); const [fontSize, setFontSize] = useState(24); const [currentValue, setCurrentValue] = useState(""); + const cachedFontSizeRef = useRef(null); const disabledController = useMemo(() => { return ( @@ -165,48 +166,55 @@ const SelectPriceRangeCustomController = forwardRef< setCurrentValue(BigNumber(current).toFixed(10)); }, [current, feeTier]); - useEffect(() => { - const divElement = divRef.current; - const inputElement = inputRef.current; + - if (divElement && inputElement) { - setFontSize( - Math.min( - (inputElement.offsetWidth * fontSize) / divElement.offsetWidth, - 24, - ), - ); + const exchangePrice = useMemo(() => { + if (Number(value) < 1 && Number(value) !== 0) { + return subscriptFormat(value); + } + + if (value === "∞") { + return value; } + + return convertToKMB(Number(value).toFixed(5)); }, [value]); - - const exchangePrice = - Number(value) < 1 && Number(value) !== 0 - ? subscriptFormat(value) - : value === "∞" - ? value - : Number(value).toFixed(5); + + const priceValueString = ( <> 1 {token0Symbol} = {exchangePrice} {token1Symbol} ); - const transformValue = useCallback(() => { - if(isNumber(currentValue) && Number(currentValue) > 1) { + const transformValue = useMemo(() => { + if(isNumber(currentValue) && Number(currentValue) >= 1) { return Number(value).toFixed(5); } - if(currentValue) { + if(isNumber(currentValue) && Number(currentValue) < 1) { return subscriptFormat(currentValue); - } + } if(value === "NaN") { + title === "Min Price" && console.log("3"); return "-"; } - + return value; }, [currentValue, value]); + useEffect(() => { + const maxDefaultLength = 7; + + if(transformValue.length < maxDefaultLength) { + setFontSize(24); + return; + } + + setFontSize((maxDefaultLength / transformValue.length) * 24); + }, [transformValue]); + return ( {title} @@ -227,7 +235,7 @@ const SelectPriceRangeCustomController = forwardRef< Math.abs(nextPrice - currentPrice) From 7ca4dc521745e886cc2f14c811cef44d0355c45d Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Sun, 28 Apr 2024 00:36:40 +0700 Subject: [PATCH 12/37] fix: remove redundant code --- .../SelectPriceRangeCutomController.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index 287bfc291..f95d9d9b1 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -66,7 +66,6 @@ const SelectPriceRangeCustomController = forwardRef< const [changed, setChanged] = useState(false); const [fontSize, setFontSize] = useState(24); const [currentValue, setCurrentValue] = useState(""); - const cachedFontSizeRef = useRef(null); const disabledController = useMemo(() => { return ( From 50a072cce02f61dd08ab855105ae2533c406ebb3 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Sun, 28 Apr 2024 09:51:02 +0700 Subject: [PATCH 13/37] fix: price controller format --- .../SelectPriceRangeCutomController.tsx | 1 - .../common/token-amount-input/TokenAmountInput.tsx | 3 ++- .../EarnAddLiquidityContainer.tsx | 2 +- packages/web/src/hooks/token/use-token-amount-input.tsx | 6 ++++++ 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index f95d9d9b1..1672c8762 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -196,7 +196,6 @@ const SelectPriceRangeCustomController = forwardRef< } if(value === "NaN") { - title === "Min Price" && console.log("3"); return "-"; } diff --git a/packages/web/src/components/common/token-amount-input/TokenAmountInput.tsx b/packages/web/src/components/common/token-amount-input/TokenAmountInput.tsx index 37931fb45..0ad7f95d2 100644 --- a/packages/web/src/components/common/token-amount-input/TokenAmountInput.tsx +++ b/packages/web/src/components/common/token-amount-input/TokenAmountInput.tsx @@ -22,8 +22,8 @@ const TokenAmountInput: React.FC = ({ changeAmount, changeToken, connected, + amount, }) => { - const disabledSelectPair = useMemo(() => { return changable !== true; }, [changable]); @@ -59,6 +59,7 @@ const TokenAmountInput: React.FC = ({
{ } }, [selectPool.compareToken?.symbol, selectPool.currentPrice, tokenAAmountInput, tokenB?.symbol, selectPool.depositRatio]); - const changeTokenAAmount = useCallback((amount: string) => { tokenAAmountInput.changeAmount(amount); setExactType("EXACT_IN"); @@ -550,5 +549,6 @@ const EarnAddLiquidityContainer: React.FC = () => { /> ); }; + export default EarnAddLiquidityContainer; diff --git a/packages/web/src/hooks/token/use-token-amount-input.tsx b/packages/web/src/hooks/token/use-token-amount-input.tsx index 82db7fc8e..d8da85387 100644 --- a/packages/web/src/hooks/token/use-token-amount-input.tsx +++ b/packages/web/src/hooks/token/use-token-amount-input.tsx @@ -39,6 +39,12 @@ export const useTokenAmountInput = (token: TokenModel | null): TokenAmountInputM if (!token) { return; } + + if(/^0\.0(?:0*)$/.test(value)) { + setAmount(value); + return; + } + const amount = BigNumber(value); if (amount.isNaN() || !amount.isFinite()) { setAmount("0"); From 1f722934bf87c37d09ad76a86e9682aa0a4a0bd9 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Sun, 28 Apr 2024 10:51:41 +0700 Subject: [PATCH 14/37] chore: add some log to test on deployed site --- .../earn-add-liquidity-container/EarnAddLiquidityContainer.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx index f0725ae98..78d65c95a 100644 --- a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx +++ b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx @@ -486,6 +486,8 @@ const EarnAddLiquidityContainer: React.FC = () => { }); }, [swapValue, setSwapValue, isKeepToken]); + console.log(router.asPath); + useEffect(() => { const nextTickLower = isNumber(selectPool.minPosition || "") ? priceToTick(selectPool.minPosition || 0) : null; const nextTickUpper = isNumber(selectPool.maxPosition || "") ? priceToTick(selectPool.maxPosition || 0) : null; From 881158737a8f3240ae49ec06220d69abf35b2605 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Sun, 28 Apr 2024 22:46:37 +0700 Subject: [PATCH 15/37] fix: price controller format for > 1 case --- .../SelectPriceRangeCutomController.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index 1672c8762..12e64d97b 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -188,7 +188,12 @@ const SelectPriceRangeCustomController = forwardRef< const transformValue = useMemo(() => { if(isNumber(currentValue) && Number(currentValue) >= 1) { - return Number(value).toFixed(5); + const significantNumber = 5; + const [intPart] = value.split(".") + + if(intPart.length >= significantNumber) return Math.round(Number(value)).toString(); + + return Number(value).toFixed(significantNumber - intPart.length) } if(isNumber(currentValue) && Number(currentValue) < 1) { From 9e669f0791df68d2b8de991f5a54f267fcf0f540 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Sun, 28 Apr 2024 22:58:27 +0700 Subject: [PATCH 16/37] fix: syntax issue --- .../SelectPriceRangeCutomController.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index 12e64d97b..0d5b9dfcd 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -189,11 +189,11 @@ const SelectPriceRangeCustomController = forwardRef< const transformValue = useMemo(() => { if(isNumber(currentValue) && Number(currentValue) >= 1) { const significantNumber = 5; - const [intPart] = value.split(".") + const [intPart] = value.split("."); if(intPart.length >= significantNumber) return Math.round(Number(value)).toString(); - return Number(value).toFixed(significantNumber - intPart.length) + return Number(value).toFixed(significantNumber - intPart.length); } if(isNumber(currentValue) && Number(currentValue) < 1) { From 0e3db80dc98daaff33394cd454a83c7a37c9f1eb Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Sun, 28 Apr 2024 23:10:51 +0700 Subject: [PATCH 17/37] fix: token amount default to 0,0000 --- .../EarnAddLiquidityContainer.tsx | 12 ++++++++++-- .../web/src/hooks/token/use-token-amount-input.tsx | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx index 78d65c95a..8db1d9e78 100644 --- a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx +++ b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx @@ -291,6 +291,10 @@ const EarnAddLiquidityContainer: React.FC = () => { if (selectPool.currentPrice === null) { return; } + if(/^0\.0(?:0*)$/.test(amount) || amount.toString() === "0") { + tokenBAmountInput.changeAmount("0"); + return; + } const ordered = tokenA?.symbol === selectPool.compareToken?.symbol; const currentPrice = ordered ? selectPool.currentPrice : 1 / selectPool.currentPrice; const depositRatioA = selectPool.depositRatio; @@ -316,9 +320,15 @@ const EarnAddLiquidityContainer: React.FC = () => { if (selectPool.currentPrice === null) { return; } + if(/^0\.0(?:0*)$/.test(amount) || amount.toString() === "0") { + tokenAAmountInput.changeAmount("0"); + return; + } const ordered = tokenB?.symbol === selectPool.compareToken?.symbol; const currentPrice = ordered ? selectPool.currentPrice : 1 / selectPool.currentPrice; const depositRatioA = selectPool.depositRatio; + + if (!selectPool.minPrice || !selectPool.maxPrice || depositRatioA === null) { tokenAAmountInput.changeAmount(BigNumber(amount).multipliedBy(currentPrice).toFixed(0)); } else { @@ -486,8 +496,6 @@ const EarnAddLiquidityContainer: React.FC = () => { }); }, [swapValue, setSwapValue, isKeepToken]); - console.log(router.asPath); - useEffect(() => { const nextTickLower = isNumber(selectPool.minPosition || "") ? priceToTick(selectPool.minPosition || 0) : null; const nextTickUpper = isNumber(selectPool.maxPosition || "") ? priceToTick(selectPool.maxPosition || 0) : null; diff --git a/packages/web/src/hooks/token/use-token-amount-input.tsx b/packages/web/src/hooks/token/use-token-amount-input.tsx index d8da85387..be7c1d04e 100644 --- a/packages/web/src/hooks/token/use-token-amount-input.tsx +++ b/packages/web/src/hooks/token/use-token-amount-input.tsx @@ -39,7 +39,7 @@ export const useTokenAmountInput = (token: TokenModel | null): TokenAmountInputM if (!token) { return; } - + if(/^0\.0(?:0*)$/.test(value)) { setAmount(value); return; From 6a2c4aed9fc09cefd9ae8d6e1ff05328ae6aaa5b Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Sun, 28 Apr 2024 23:17:47 +0700 Subject: [PATCH 18/37] fix: loading pool info --- packages/web/src/hooks/pool/use-select-pool.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/web/src/hooks/pool/use-select-pool.tsx b/packages/web/src/hooks/pool/use-select-pool.tsx index 8bbded53e..bd8ea14fb 100644 --- a/packages/web/src/hooks/pool/use-select-pool.tsx +++ b/packages/web/src/hooks/pool/use-select-pool.tsx @@ -91,7 +91,6 @@ export const useSelectPool = ({ "NONE" | "INTERACTION" | "TICK_UPDATE" | "FINISH" >("NONE"); const [isChangeMinMax, setIsChangeMinMax] = useState(false); - const [loadingPoolInfo , setLoadingPoolInfo] = useState(false); const { isLoadingCommon } = useLoading(); useEffect(() => { @@ -110,7 +109,7 @@ export const useSelectPool = ({ if (isCreate && startPrice === null) { return "CREATE"; } - if ( loadingPoolInfo || (!isIgnoreDefaultLoading && isLoadingCommon)) { + if ( !poolInfo || (!isIgnoreDefaultLoading && isLoadingCommon)) { return "LOADING"; } return "DONE"; @@ -121,7 +120,6 @@ export const useSelectPool = ({ tokenA, tokenB, isLoadingCommon, - loadingPoolInfo ]); const liquidityOfTickPoints: [number, number][] = useMemo(() => { @@ -377,7 +375,6 @@ export const useSelectPool = ({ } return false; }) === 1; - setLoadingPoolInfo(true); poolRepository .getPoolDetailRPCByPoolPath(poolPath) .then(poolInfo => { @@ -402,9 +399,6 @@ export const useSelectPool = ({ .catch(() => { setPoolInfo(null); }) - .finally(() => { - setLoadingPoolInfo(false); - }); }, [ feeTier, tokenA, From 9c10d939a8ba0ad05cf49fa8c2f2970953fb6214 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Sun, 28 Apr 2024 23:22:08 +0700 Subject: [PATCH 19/37] fix: compile error --- packages/web/src/hooks/pool/use-select-pool.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/hooks/pool/use-select-pool.tsx b/packages/web/src/hooks/pool/use-select-pool.tsx index bd8ea14fb..7745a0943 100644 --- a/packages/web/src/hooks/pool/use-select-pool.tsx +++ b/packages/web/src/hooks/pool/use-select-pool.tsx @@ -398,7 +398,7 @@ export const useSelectPool = ({ }) .catch(() => { setPoolInfo(null); - }) + }); }, [ feeTier, tokenA, From b0659d9d6ff65e89173a8f59dd6637b0d18ca339 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Tue, 30 Apr 2024 21:24:02 +0700 Subject: [PATCH 20/37] wip: fix url blinking --- .../EarnAddLiquidityContainer.tsx | 22 ++++++++++++------- .../web/src/hooks/common/use-url-param.ts | 8 ++++--- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx index 8db1d9e78..a7b6bf222 100644 --- a/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx +++ b/packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx @@ -500,16 +500,22 @@ const EarnAddLiquidityContainer: React.FC = () => { const nextTickLower = isNumber(selectPool.minPosition || "") ? priceToTick(selectPool.minPosition || 0) : null; const nextTickUpper = isNumber(selectPool.maxPosition || "") ? priceToTick(selectPool.maxPosition || 0) : null; - const queryString = makeQueryString({ - tokenA: tokenA?.path, - tokenB: tokenB?.path, - fee_tier: swapFeeTier === "NONE" ? "" : (swapFeeTier || "").slice(4), - price_range_type: priceRange?.type, - tickLower: nextTickLower, - tickUpper: nextTickUpper, - }); + if (tokenA?.path && tokenB?.path) { + + const queryString = makeQueryString({ + tokenA: tokenA?.path, + tokenB: tokenB?.path, + fee_tier: swapFeeTier === "NONE" ? "" : (swapFeeTier || "").slice(4), + price_range_type: priceRange?.type, + tickLower: nextTickLower, + tickUpper: nextTickUpper, + }); + // log ni luoon phai ko , hinh nhu tui cung log rooi + console.log("🚀 ~ useEffect ~ queryString:", queryString); + + router.push(`/earn/add${queryString ? "?" + queryString : ""}`, undefined, { shallow: true }); } }, [swapFeeTier, tokenA, tokenB, selectPool.minPosition, selectPool.maxPosition, priceRange?.type]); diff --git a/packages/web/src/hooks/common/use-url-param.ts b/packages/web/src/hooks/common/use-url-param.ts index ad02028a1..c3fac07c0 100644 --- a/packages/web/src/hooks/common/use-url-param.ts +++ b/packages/web/src/hooks/common/use-url-param.ts @@ -7,10 +7,12 @@ export function makeQueryString(data: DefaultObject): string { Object.keys(data).forEach(key => { const value = data[key]; if (value === null || value === undefined || value === "") { - return; + + } else { + const param = `${key}=${data[key]}`; + params.push(param); } - const param = `${key}=${data[key]}`; - params.push(param); + }); return params.join("&"); } From 1de3a5acadd7f6dbc9f562be31dab3a71cb71d91 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Tue, 30 Apr 2024 21:32:05 +0700 Subject: [PATCH 21/37] wip: fix url blinking --- packages/web/src/hooks/common/use-url-param.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/web/src/hooks/common/use-url-param.ts b/packages/web/src/hooks/common/use-url-param.ts index c3fac07c0..94d61dc78 100644 --- a/packages/web/src/hooks/common/use-url-param.ts +++ b/packages/web/src/hooks/common/use-url-param.ts @@ -9,7 +9,11 @@ export function makeQueryString(data: DefaultObject): string { if (value === null || value === undefined || value === "") { } else { - const param = `${key}=${data[key]}`; + let value = data[key]; + if (typeof data[key] === "string") { + value = encodeURIComponent(data[key] as string); + } + const param = `${key}=${value}`; params.push(param); } From 483fc9692d3e7838b72df3ef8d3431e4e2140b35 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Tue, 30 Apr 2024 21:33:08 +0700 Subject: [PATCH 22/37] wip: fix url blinking --- packages/web/src/hooks/common/use-url-param.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/hooks/common/use-url-param.ts b/packages/web/src/hooks/common/use-url-param.ts index 94d61dc78..20fb98c4b 100644 --- a/packages/web/src/hooks/common/use-url-param.ts +++ b/packages/web/src/hooks/common/use-url-param.ts @@ -11,7 +11,7 @@ export function makeQueryString(data: DefaultObject): string { } else { let value = data[key]; if (typeof data[key] === "string") { - value = encodeURIComponent(data[key] as string); + value = encodeURIComponent((data[key] ?? "") as string); } const param = `${key}=${value}`; params.push(param); From 4555bb76db6c3252d20f48d3a6ae91bf70351c04 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Thu, 2 May 2024 13:36:29 +0700 Subject: [PATCH 23/37] fix: pool info fetch issue --- .../SelectPriceRangeCutomController.tsx | 2 +- .../EarnAddLiquidityContainer.tsx | 7 - .../web/src/hooks/pool/use-select-pool.tsx | 172 +++++++++--------- .../repositories/pool/pool-repository-impl.ts | 44 ++--- 4 files changed, 106 insertions(+), 119 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index 0d5b9dfcd..42483e21f 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -242,7 +242,7 @@ const SelectPriceRangeCustomController = forwardRef< onChange={onChangeValue} onBlur={onBlurUpdate} ref={inputRef} - onFocus={() => setCurrentValue("")} + // onFocus={() => setCurrentValue("")} />
{ const nextTickLower = isNumber(selectPool.minPosition || "") ? priceToTick(selectPool.minPosition || 0) : null; const nextTickUpper = isNumber(selectPool.maxPosition || "") ? priceToTick(selectPool.maxPosition || 0) : null; - - if (tokenA?.path && tokenB?.path) { - const queryString = makeQueryString({ tokenA: tokenA?.path, tokenB: tokenB?.path, @@ -512,10 +509,6 @@ const EarnAddLiquidityContainer: React.FC = () => { tickLower: nextTickLower, tickUpper: nextTickUpper, }); - // log ni luoon phai ko , hinh nhu tui cung log rooi - console.log("🚀 ~ useEffect ~ queryString:", queryString); - - router.push(`/earn/add${queryString ? "?" + queryString : ""}`, undefined, { shallow: true }); } }, [swapFeeTier, tokenA, tokenB, selectPool.minPosition, selectPool.maxPosition, priceRange?.type]); diff --git a/packages/web/src/hooks/pool/use-select-pool.tsx b/packages/web/src/hooks/pool/use-select-pool.tsx index 7745a0943..ff292a25b 100644 --- a/packages/web/src/hooks/pool/use-select-pool.tsx +++ b/packages/web/src/hooks/pool/use-select-pool.tsx @@ -16,6 +16,7 @@ import { MAX_TICK, MIN_TICK } from "@constants/swap.constant"; import { EarnState } from "@states/index"; import { useAtom } from "jotai"; import { useLoading } from "@hooks/common/use-loading"; +import { useQuery } from "@tanstack/react-query"; type RenderState = "NONE" | "CREATE" | "LOADING" | "DONE"; @@ -85,7 +86,6 @@ export const useSelectPool = ({ const [minPosition, setMinPosition] = useState(null); const [maxPosition, setMaxPosition] = useState(null); const [compareToken, setCompareToken] = useState(tokenA); - const [poolInfo, setPoolInfo] = useState(null); const [latestPoolPath, setLatestPoolPath] = useState(null); const [interactionType, setInteractionType] = useState< "NONE" | "INTERACTION" | "TICK_UPDATE" | "FINISH" @@ -93,6 +93,88 @@ export const useSelectPool = ({ const [isChangeMinMax, setIsChangeMinMax] = useState(false); const { isLoadingCommon } = useLoading(); + const tokenAPath = useMemo(() => tokenA?.wrappedPath || tokenA?.path , [tokenA?.path, tokenA?.wrappedPath]); + const tokenBPath = useMemo(() => tokenB?.wrappedPath || tokenB?.path , [tokenB?.path, tokenB?.wrappedPath]); + + const { data: poolInfo, isLoading: isLoadingPoolInfo } = useQuery< + PoolDetailRPCModel | null, + Error + >({ + queryKey: ["poolInfo", tokenAPath, tokenBPath, feeTier, isCreate, startPrice], + queryFn: async () => { + if(!tokenA || !tokenB || !feeTier) { + return await Promise.resolve(null); + } + + if (isCreate) { + if (!startPrice) { + return await Promise.resolve(null); + } + const poolInfo: PoolDetailRPCModel = { + poolPath: "", + tokenAPath: "", + tokenBPath: "", + fee: 0, + tokenABalance: 0n, + tokenBBalance: 0n, + tickSpacing: SwapFeeTierInfoMap[feeTier].tickSpacing, + maxLiquidityPerTick: 0, + price: startPrice, + sqrtPriceX96: 0n, + tick: 0, + feeProtocol: 0, + tokenAProtocolFee: 0, + tokenBProtocolFee: 0, + liquidity: 0n, + ticks: [], + tickDetails: {}, + tickBitmaps: [], + positions: [], + }; + + return Promise.resolve(poolInfo); + } + + const tokenAPoolPath = tokenAPath; + const tokenBPoolPath = tokenB.wrappedPath || tokenB.path; + const tokenPair = [tokenAPoolPath, tokenBPoolPath].sort(); + const poolPath = `${tokenPair.join(":")}:${ + SwapFeeTierInfoMap[feeTier].fee + }`; + + const poolRes = await poolRepository.getPoolDetailRPCByPoolPath(poolPath); + + const reverse = + tokenPair.findIndex(path => { + if (compareToken) { + return isNativeToken(compareToken) + ? compareToken.wrappedPath === path + : compareToken.path === path; + } + return false; + }) === 1; + + const changedPoolInfo = + reverse === false + ? poolRes + : { + ...poolRes, + price: 1 / poolRes.price, + ticks: Object.keys(poolRes.ticks).map( + tick => Number(tick) * -1, + ), + positions: poolRes.positions.map(position => ({ + ...position, + tickLower: position.tickUpper * -1, + tickUpper: position.tickLower * -1, + })), + }; + + return Promise.resolve(changedPoolInfo); + }, + staleTime: 5_000 + }); + useEffect(() => { priceRangeRef.current = [...defaultPriceRange]; }, [defaultPriceRange]); @@ -109,7 +191,7 @@ export const useSelectPool = ({ if (isCreate && startPrice === null) { return "CREATE"; } - if ( !poolInfo || (!isIgnoreDefaultLoading && isLoadingCommon)) { + if (isLoadingPoolInfo || (isIgnoreDefaultLoading ? isLoadingCommon : null)) { return "LOADING"; } return "DONE"; @@ -120,6 +202,7 @@ export const useSelectPool = ({ tokenA, tokenB, isLoadingCommon, + isLoadingPoolInfo, ]); const liquidityOfTickPoints: [number, number][] = useMemo(() => { @@ -324,91 +407,6 @@ export const useSelectPool = ({ setFullRange(true); }, [feeTier]); - useEffect(() => { - if (!tokenA || !tokenB || !feeTier) { - return; - } - setPoolInfo(null); - - if (isCreate) { - if (!startPrice) { - setPoolInfo(null); - return; - } - const poolInfo: PoolDetailRPCModel = { - poolPath: "", - tokenAPath: "", - tokenBPath: "", - fee: 0, - tokenABalance: 0n, - tokenBBalance: 0n, - tickSpacing: SwapFeeTierInfoMap[feeTier].tickSpacing, - maxLiquidityPerTick: 0, - price: startPrice, - sqrtPriceX96: 0n, - tick: 0, - feeProtocol: 0, - tokenAProtocolFee: 0, - tokenBProtocolFee: 0, - liquidity: 0n, - ticks: [], - tickDetails: {}, - tickBitmaps: [], - positions: [], - }; - setPoolInfo(poolInfo); - return; - } - - const tokenAPoolPath = tokenA.wrappedPath || tokenA.path; - const tokenBPoolPath = tokenB.wrappedPath || tokenB.path; - const tokenPair = [tokenAPoolPath, tokenBPoolPath].sort(); - const poolPath = `${tokenPair.join(":")}:${ - SwapFeeTierInfoMap[feeTier].fee - }`; - const reverse = - tokenPair.findIndex(path => { - if (compareToken) { - return isNativeToken(compareToken) - ? compareToken.wrappedPath === path - : compareToken.path === path; - } - return false; - }) === 1; - poolRepository - .getPoolDetailRPCByPoolPath(poolPath) - .then(poolInfo => { - - const changedPoolInfo = - reverse === false - ? poolInfo - : { - ...poolInfo, - price: 1 / poolInfo.price, - ticks: Object.keys(poolInfo.ticks).map( - tick => Number(tick) * -1, - ), - positions: poolInfo.positions.map(position => ({ - ...position, - tickLower: position.tickUpper * -1, - tickUpper: position.tickLower * -1, - })), - }; - setPoolInfo(changedPoolInfo); - }) - .catch(() => { - setPoolInfo(null); - }); - }, [ - feeTier, - tokenA, - tokenB, - compareToken, - isCreate, - startPrice, - poolRepository, - ]); - useEffect(() => { if (interactionType === "TICK_UPDATE") { if (minPosition === null || maxPosition === null) { diff --git a/packages/web/src/repositories/pool/pool-repository-impl.ts b/packages/web/src/repositories/pool/pool-repository-impl.ts index 5ca5145f4..be7e73891 100644 --- a/packages/web/src/repositories/pool/pool-repository-impl.ts +++ b/packages/web/src/repositories/pool/pool-repository-impl.ts @@ -69,29 +69,24 @@ export class PoolRepositoryImpl implements PoolRepository { this.walletClient = walletClient; } getRPCPools = async (): Promise => { - if (Date.now() - this.updatedAt < 5_000) { - return this.rpcPools; - } - this.updatedAt = Date.now(); + try { + this.updatedAt = Date.now(); + + const poolPackagePath = PACKAGE_POOL_PATH; + + if (!poolPackagePath || !this.rpcProvider) { + throw new CommonError("FAILED_INITIALIZE_ENVIRONMENT"); + } - const poolPackagePath = PACKAGE_POOL_PATH; - if (!poolPackagePath || !this.rpcProvider) { - throw new CommonError("FAILED_INITIALIZE_ENVIRONMENT"); + const param = makeABCIParams("ApiGetPools", []); + const res = await this.rpcProvider.evaluateExpression(poolPackagePath, param); + const pools = PoolRPCMapper.fromList(evaluateExpressionToObject<{ response: PoolRPCResponse[] }>(res)?.response || []); + this.rpcPools = pools; + + return pools; + } catch (error) { + return []; } - const param = makeABCIParams("ApiGetPools", []); - const result: PoolRPCModel[] = await this.rpcProvider - .evaluateExpression(poolPackagePath, param) - .then(evaluateExpressionToObject<{ response: PoolRPCResponse[] }>) - .then(data => { - const pools = PoolRPCMapper.fromList(data?.response || []); - this.rpcPools = pools; - return pools; - }) - .catch(e => { - console.error(e); - return []; - }); - return result; }; getPools = async (): Promise => { @@ -130,9 +125,10 @@ export class PoolRepositoryImpl implements PoolRepository { getPoolDetailRPCByPoolPath = async ( poolPath: string, ): Promise => { - const pool = await this.getRPCPools() - .then(pools => pools.find(pool => pool?.poolPath === poolPath)) - .catch(() => null); + const pools = await this.getRPCPools(); + const pool = pools?.find(item => { + return item.poolPath === poolPath; + }); if (!pool) { throw new PoolError("NOT_FOUND_POOL"); } From 10ebcd0f4aa9314081ad57ea5678303e1a60d37b Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Thu, 2 May 2024 15:03:06 +0700 Subject: [PATCH 24/37] fix: custom format price range display --- .../SelectPriceRangeCutomController.tsx | 136 ++++++++---------- 1 file changed, 56 insertions(+), 80 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index 42483e21f..41d57d7c3 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -3,7 +3,6 @@ import { SwapFeeTierMaxPriceRangeMap, SwapFeeTierType, } from "@constants/option.constant"; -import { numberToFormat } from "@utils/string-utils"; import { findNearPrice } from "@utils/swap-utils"; import BigNumber from "bignumber.js"; import React, { @@ -62,21 +61,20 @@ const SelectPriceRangeCustomController = forwardRef< }, ref) => { const divRef = useRef(null); const inputRef = useRef(null); - const [value, setValue] = useState(""); + const [displayValue, setDisplayValue] = useState(""); const [changed, setChanged] = useState(false); const [fontSize, setFontSize] = useState(24); - const [currentValue, setCurrentValue] = useState(""); const disabledController = useMemo(() => { return ( - value === "" || - value === "-" || - BigNumber(value).isNaN() || - value === "NaN" || - value === "0" || - value === "∞" + displayValue === "" || + displayValue === "-" || + BigNumber(displayValue).isNaN() || + displayValue === "NaN" || + displayValue === "0" || + displayValue === "∞" ); - }, [value]); + }, [displayValue]); const onClickDecrease = useCallback(() => { decrease(); @@ -91,93 +89,75 @@ const SelectPriceRangeCustomController = forwardRef< const onChangeValue = useCallback( (event: React.ChangeEvent) => { const newValue = event.target.value; - setValue(newValue); - if (value !== newValue) { + setDisplayValue(newValue); + if (displayValue !== newValue) { setChanged(true); } }, - [value], + [displayValue], ); - const onBlurUpdate = useCallback(() => { + const onBlur = useCallback(() => { if (!changed) { return; } setChanged(false); - if (value === "∞" || value === "-") { - return; - } - const currentValue = BigNumber(Number(value.replace(",", ""))); - if (currentValue.isNaN()) { - setValue("-"); - setCurrentValue("-"); - return; - } - if (currentValue.isLessThanOrEqualTo(0.00000001)) { - setValue("0"); - setCurrentValue("0"); - return; - } + const currentValue = BigNumber(Number(displayValue.replace(",", ""))); + const nearPrice = findNearPrice(currentValue.toNumber(), tickSpacing); changePrice(nearPrice); setIsChangeMinMax(true); - if (nearPrice > 1) { - setValue(numberToFormat(nearPrice, 4)); - setCurrentValue(numberToFormat(nearPrice, 4)); - } else { - setValue(nearPrice.toString()); - setCurrentValue(nearPrice.toString()); - } + if (selectedFullRange) { onSelectCustomRange(); } - }, [changed, value, tickSpacing, selectedFullRange, priceRangeType]); + }, [changed, displayValue, tickSpacing, selectedFullRange, priceRangeType]); useImperativeHandle(ref, () => { - return { formatData: () => setCurrentValue("") }; + return { formatData: () => { + return; + }}; }, []); useEffect(() => { if (current === null || BigNumber(Number(current)).isNaN()) { - setValue("-"); + setDisplayValue("-"); return; } const currentValue = BigNumber(current).toNumber(); if (currentValue < 0.00000001) { - setValue("0"); + setDisplayValue("0"); return; } const { minPrice, maxPrice } = SwapFeeTierMaxPriceRangeMap[feeTier]; if (currentValue <= minPrice) { - setValue("0"); + setDisplayValue("0"); return; } if (currentValue / maxPrice > 0.9) { - setValue("∞"); + setDisplayValue("∞"); return; } if (currentValue >= 1) { - setValue(BigNumber(current).toFixed(4)); - setCurrentValue(BigNumber(current).toFixed(10)); + setDisplayValue(greaterThan1Transform(BigNumber(current).toFixed())); return; } - setValue(BigNumber(current).toFixed(10)); - setCurrentValue(BigNumber(current).toFixed(10)); + + setDisplayValue(subscriptFormat(BigNumber(current).toFixed())); }, [current, feeTier]); - const exchangePrice = useMemo(() => { - if (Number(value) < 1 && Number(value) !== 0) { - return subscriptFormat(value); + if (Number(displayValue) < 1 && Number(displayValue) !== 0) { + return subscriptFormat(displayValue); } - if (value === "∞") { - return value; + if (displayValue === "∞") { + return displayValue; } - return convertToKMB(Number(value).toFixed(5)); - }, [value]); + return convertToKMB(Number(displayValue).toFixed(5)); + }, [displayValue]); const priceValueString = ( @@ -186,37 +166,34 @@ const SelectPriceRangeCustomController = forwardRef< ); - const transformValue = useMemo(() => { - if(isNumber(currentValue) && Number(currentValue) >= 1) { - const significantNumber = 5; - const [intPart] = value.split("."); + function greaterThan1Transform(numStr: string) { + const number = Number(numStr); - if(intPart.length >= significantNumber) return Math.round(Number(value)).toString(); + const significantNumber = 5; + const [intPart] = numStr.split("."); - return Number(value).toFixed(significantNumber - intPart.length); - } - - if(isNumber(currentValue) && Number(currentValue) < 1) { - return subscriptFormat(currentValue); - } - - if(value === "NaN") { - return "-"; + if(intPart.length >= significantNumber) { + const originalNumber = number; + const digitCountRatio = Math.pow(10, intPart.length - significantNumber); + + const numberWith5SignificantNumber = (Math.round(originalNumber / digitCountRatio) * digitCountRatio).toString(); + + return numberWith5SignificantNumber; } - - return value; - }, [currentValue, value]); + + return number.toFixed(significantNumber - intPart.length); + } useEffect(() => { const maxDefaultLength = 7; - if(transformValue.length < maxDefaultLength) { + if(displayValue.length < maxDefaultLength) { setFontSize(24); return; } - setFontSize((maxDefaultLength / transformValue.length) * 24); - }, [transformValue]); + setFontSize((maxDefaultLength / displayValue.length) * 24); + }, [displayValue]); return ( @@ -238,22 +215,21 @@ const SelectPriceRangeCustomController = forwardRef< setCurrentValue("")} />
- {isNumber(currentValue) && Number(currentValue) > 1 - ? convertToKMB(Number(value).toFixed(4)) - : currentValue - ? subscriptFormat(currentValue) - : value} + {isNumber(current ?? "") && Number(current) > 1 + ? convertToKMB(Number(displayValue).toFixed(4)) + : current + ? subscriptFormat(current) + : displayValue}
Date: Thu, 2 May 2024 15:20:46 +0700 Subject: [PATCH 25/37] fix: zoom on change theme --- .../PoolSelectionGraph.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx b/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx index f759464e5..f46e57fee 100644 --- a/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx +++ b/packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { GraphWrapper, PoolSelectionGraphWrapper } from "./PoolSelectionGraph.styles"; import * as d3 from "d3"; import { displayTickNumber } from "@utils/string-utils"; @@ -506,18 +506,19 @@ const PoolSelectionGraph: React.FC = (props) => { .attr("class", d => "resize handle--custom handle--" + d.type); }, [boundsHeight, brush, brushRef]); - /** Zoom */ - const zoom: d3.ZoomBehavior = d3 - .zoom() - .scaleExtent([0.01, 2 ** 20]) - .on("zoom", onZoom); - - function onZoom(event: d3.D3ZoomEvent) { + const onZoom = useCallback(() => (event: d3.D3ZoomEvent) => { const blocks = ["brush", "click"]; if (event?.sourceEvent && blocks.includes(event.sourceEvent.type)) return; // ignore zoom-by-brush const transform = event.transform; scaleX.domain(transform.rescaleX(defaultScaleX).domain()); - } + }, [defaultScaleX, scaleX]); + + /** Zoom */ + const zoom: d3.ZoomBehavior = useMemo(() => d3 + .zoom() + .scaleExtent([0.01, 2 ** 20]) + .on("zoom", onZoom), + [onZoom]); function initZoom() { const svgElement = d3.select(svgRef.current); From a7acbf075d9acb850a419e74affe4f4cdabcf986 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Thu, 2 May 2024 16:14:03 +0700 Subject: [PATCH 26/37] fix: price range remaining issue --- .../SelectPriceRangeCutomController.tsx | 50 +++++++++++-------- .../EarnAddLiquidityContainer.tsx | 4 +- 2 files changed, 32 insertions(+), 22 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index 41d57d7c3..12b98b085 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -9,7 +9,6 @@ import React, { useCallback, useEffect, useState, - useRef, forwardRef, useImperativeHandle, useMemo, @@ -59,8 +58,6 @@ const SelectPriceRangeCustomController = forwardRef< token0Symbol, token1Symbol, }, ref) => { - const divRef = useRef(null); - const inputRef = useRef(null); const [displayValue, setDisplayValue] = useState(""); const [changed, setChanged] = useState(false); const [fontSize, setFontSize] = useState(24); @@ -69,7 +66,6 @@ const SelectPriceRangeCustomController = forwardRef< return ( displayValue === "" || displayValue === "-" || - BigNumber(displayValue).isNaN() || displayValue === "NaN" || displayValue === "0" || displayValue === "∞" @@ -88,9 +84,10 @@ const SelectPriceRangeCustomController = forwardRef< const onChangeValue = useCallback( (event: React.ChangeEvent) => { - const newValue = event.target.value; - setDisplayValue(newValue); - if (displayValue !== newValue) { + const value = event.target.value; + const formattedValue = value.replace(/[^0-9.]/, ""); + setDisplayValue(formattedValue); + if (displayValue !== formattedValue) { setChanged(true); } }, @@ -148,17 +145,24 @@ const SelectPriceRangeCustomController = forwardRef< const exchangePrice = useMemo(() => { - if (Number(displayValue) < 1 && Number(displayValue) !== 0) { - return subscriptFormat(displayValue); + if (current === null || BigNumber(Number(current)).isNaN()) { + setDisplayValue("-"); + return; } - if (displayValue === "∞") { - return displayValue; + const currentValue = Number(current); + const { maxPrice } = SwapFeeTierMaxPriceRangeMap[feeTier]; + + if (Number(current) < 1 && Number(current) !== 0) { + return subscriptFormat(Number(current)); } - return convertToKMB(Number(displayValue).toFixed(5)); - }, [displayValue]); + if (currentValue / maxPrice > 0.9) { + return "∞"; + } + return convertToKMB(Number(current).toFixed(5)); + }, [current, feeTier]); const priceValueString = ( <> @@ -195,6 +199,18 @@ const SelectPriceRangeCustomController = forwardRef< setFontSize((maxDefaultLength / displayValue.length) * 24); }, [displayValue]); + const ratioDisplay = useMemo(() => { + if(isNumber(current ?? "") && Number(current) >= 1) { + return convertToKMB(Number(current).toFixed(4)); + } + + if(current) { + return subscriptFormat(current); + } + + return displayValue; + }, [current, displayValue]); + return ( {title} @@ -218,18 +234,12 @@ const SelectPriceRangeCustomController = forwardRef< value={displayValue} onChange={onChangeValue} onBlur={onBlur} - ref={inputRef} />
- {isNumber(current ?? "") && Number(current) > 1 - ? convertToKMB(Number(displayValue).toFixed(4)) - : current - ? subscriptFormat(current) - : displayValue} + {ratioDisplay}
{ }, [swapValue, setSwapValue, isKeepToken]); useEffect(() => { - const nextTickLower = isNumber(selectPool.minPosition || "") ? priceToTick(selectPool.minPosition || 0) : null; - const nextTickUpper = isNumber(selectPool.maxPosition || "") ? priceToTick(selectPool.maxPosition || 0) : null; + const nextTickLower = (isNumber(selectPool.minPosition || "") || isFinite(selectPool.minPosition || 0)) ? priceToTick(selectPool.minPosition || 0) : null; + const nextTickUpper = (isNumber(selectPool.maxPosition || "") || isFinite(selectPool.maxPosition || 0)) ? priceToTick(selectPool.maxPosition || 0) : null; if (tokenA?.path && tokenB?.path) { const queryString = makeQueryString({ From d72d1a0abbc2d33786ad534aa23d4c960a15ffe2 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Thu, 2 May 2024 22:02:22 +0700 Subject: [PATCH 27/37] fix: price range remaining issue --- .../SelectPriceRangeCutomController.tsx | 99 ++++++++++--------- packages/web/src/utils/number-utils.ts | 18 ++-- 2 files changed, 59 insertions(+), 58 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index 12b98b085..9b46cbc77 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -1,5 +1,4 @@ import { - PriceRangeType, SwapFeeTierMaxPriceRangeMap, SwapFeeTierType, } from "@constants/option.constant"; @@ -12,14 +11,15 @@ import React, { forwardRef, useImperativeHandle, useMemo, + useRef, } from "react"; import { SelectPriceRangeCutomControllerWrapper } from "./SelectPriceRangeCutomController.styles"; import IconAdd from "../icons/IconAdd"; import IconRemove from "../icons/IconRemove"; import { convertToKMB } from "@utils/stake-position-utils"; -import { isNumber, subscriptFormat } from "@utils/number-utils"; +import { isNumber, removeTrailingZeros, subscriptFormat } from "@utils/number-utils"; -export interface SelectPriceRangeCutomControllerProps { +export interface SelectPriceRangeCustomControllerProps { title: string; token0Symbol: string; token1Symbol: string; @@ -33,7 +33,6 @@ export interface SelectPriceRangeCutomControllerProps { increase: () => void; currentPriceStr: JSX.Element | string; setIsChangeMinMax: (value: boolean) => void; - priceRangeType: PriceRangeType | null; } export interface SelectPriceRangeCustomControllerRef { @@ -42,7 +41,7 @@ export interface SelectPriceRangeCustomControllerRef { const SelectPriceRangeCustomController = forwardRef< SelectPriceRangeCustomControllerRef, - SelectPriceRangeCutomControllerProps + SelectPriceRangeCustomControllerProps >(({ title, current, @@ -54,13 +53,14 @@ const SelectPriceRangeCustomController = forwardRef< selectedFullRange, onSelectCustomRange, setIsChangeMinMax, - priceRangeType, token0Symbol, token1Symbol, }, ref) => { const [displayValue, setDisplayValue] = useState(""); const [changed, setChanged] = useState(false); const [fontSize, setFontSize] = useState(24); + + const submitCountRef = useRef(0); const disabledController = useMemo(() => { return ( @@ -87,41 +87,17 @@ const SelectPriceRangeCustomController = forwardRef< const value = event.target.value; const formattedValue = value.replace(/[^0-9.]/, ""); setDisplayValue(formattedValue); - if (displayValue !== formattedValue) { - setChanged(true); - } + setChanged(true); }, - [displayValue], + [], ); - const onBlur = useCallback(() => { - if (!changed) { - return; - } - setChanged(false); - const currentValue = BigNumber(Number(displayValue.replace(",", ""))); - - const nearPrice = findNearPrice(currentValue.toNumber(), tickSpacing); - changePrice(nearPrice); - setIsChangeMinMax(true); - - if (selectedFullRange) { - onSelectCustomRange(); - } - }, [changed, displayValue, tickSpacing, selectedFullRange, priceRangeType]); - - useImperativeHandle(ref, () => { - return { formatData: () => { - return; - }}; - }, []); - - useEffect(() => { - if (current === null || BigNumber(Number(current)).isNaN()) { + const formatControllerValue = useCallback((value: number | null) => { + if (value === null || BigNumber(Number(value)).isNaN()) { setDisplayValue("-"); return; } - const currentValue = BigNumber(current).toNumber(); + const currentValue = BigNumber(value).toNumber(); if (currentValue < 0.00000001) { setDisplayValue("0"); return; @@ -136,32 +112,63 @@ const SelectPriceRangeCustomController = forwardRef< return; } if (currentValue >= 1) { - setDisplayValue(greaterThan1Transform(BigNumber(current).toFixed())); + setDisplayValue(greaterThan1Transform(BigNumber(value).toFixed())); return; } - setDisplayValue(subscriptFormat(BigNumber(current).toFixed())); - }, [current, feeTier]); + setDisplayValue(subscriptFormat(BigNumber(value).toFixed())); + },[feeTier]); + + const onBlur = useCallback(() => { + if (!changed) { + return; + } + setChanged(false); + const currentValue = BigNumber(Number(displayValue)); + + const nearPrice = findNearPrice(currentValue.toNumber(), tickSpacing); + + if(nearPrice !== current) { + changePrice(nearPrice); + } else { + formatControllerValue(nearPrice); + } + submitCountRef.current = submitCountRef.current++; + setIsChangeMinMax(true); + + if (selectedFullRange) { + onSelectCustomRange(); + } + }, [changed, displayValue, tickSpacing, current, setIsChangeMinMax, selectedFullRange, changePrice, formatControllerValue, onSelectCustomRange]); + + useImperativeHandle(ref, () => { + return { formatData: () => { + return; + }}; + }, []); + + useEffect(() => { + formatControllerValue(current); + }, [current, formatControllerValue]); const exchangePrice = useMemo(() => { if (current === null || BigNumber(Number(current)).isNaN()) { - setDisplayValue("-"); - return; + return "-"; } - const currentValue = Number(current); + const currentValue = BigNumber(current).toNumber(); const { maxPrice } = SwapFeeTierMaxPriceRangeMap[feeTier]; - - if (Number(current) < 1 && Number(current) !== 0) { - return subscriptFormat(Number(current)); + + if (currentValue < 1 && currentValue !== 0) { + return subscriptFormat(BigNumber(current).toFixed()); } if (currentValue / maxPrice > 0.9) { return "∞"; } - return convertToKMB(Number(current).toFixed(5)); + return convertToKMB(Number(current).toFixed()); }, [current, feeTier]); const priceValueString = ( @@ -185,7 +192,7 @@ const SelectPriceRangeCustomController = forwardRef< return numberWith5SignificantNumber; } - return number.toFixed(significantNumber - intPart.length); + return removeTrailingZeros(number.toFixed(significantNumber - intPart.length)); } useEffect(() => { diff --git a/packages/web/src/utils/number-utils.ts b/packages/web/src/utils/number-utils.ts index 0f7858193..b7a40293e 100644 --- a/packages/web/src/utils/number-utils.ts +++ b/packages/web/src/utils/number-utils.ts @@ -300,17 +300,11 @@ function countZeros(decimalFraction: string) { export function subscriptFormat(number: string | number) { const numberStr = number.toString(); const numberOfZero = countZeros(numberStr); - if (numberStr[0] !== "0" || !numberStr.startsWith("0.00000")) { - if (Number(number) < 1) { - if(numberOfZero === 5) { - return removeTrailingZeros(Number(numberStr).toFixed(Math.min(9, numberStr.length))); - } - - return removeTrailingZeros(Number(numberStr).toFixed(Math.min(numberOfZero - 1 + 5, 5))); - } else { - return removeTrailingZeros(Number(numberStr).toFixed(5)); - } + + if(numberOfZero <= 5) { + return removeTrailingZeros(Number(numberStr).toFixed(Math.min((numberOfZero - 1) + 5, numberStr.length))); } - - return `0.0${String.fromCharCode(8320 + Number(numberOfZero - 1))}${removeTrailingZeros(numberStr.slice(numberOfZero + 1, numberOfZero + 6))}`; + + const result = `0.0${String.fromCharCode(8320 + Number(numberOfZero - 1))}${removeTrailingZeros(numberStr.slice(numberOfZero + 1, numberOfZero + 6))}`; + return result; } \ No newline at end of file From 7b7778e41586efeb368ff52d6a4d68baa3e92459 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Thu, 2 May 2024 22:06:58 +0700 Subject: [PATCH 28/37] fix: price range remaining issue --- .../select-price-range-custom/SelectPriceRangeCustom.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx index d485e93c9..eb1fb7f06 100644 --- a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx +++ b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx @@ -393,7 +393,7 @@ const SelectPriceRangeCustom = forwardRef adjustRangeManually(() => selectPool.increaseMinTick())} currentPriceStr={currentPriceStr} setIsChangeMinMax={selectPool.setIsChangeMinMax} - priceRangeType={priceRangeType} + // priceRangeType={priceRangeType} ref={minPriceRangeCustomRef} /> adjustRangeManually(() => selectPool.increaseMaxTick())} currentPriceStr={currentPriceStrReverse} setIsChangeMinMax={selectPool.setIsChangeMinMax} - priceRangeType={priceRangeType} + // priceRangeType={priceRangeType} ref={maxPriceRangeCustomRef} />
From 4eda5e90427c75cea476ad598f6866ca31817f58 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Thu, 2 May 2024 22:41:07 +0700 Subject: [PATCH 29/37] fix: compile error --- .../SelectPriceRangeCustomPosition.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustomPosition.tsx b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustomPosition.tsx index 4255cd37c..84a4454f4 100644 --- a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustomPosition.tsx +++ b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustomPosition.tsx @@ -354,7 +354,7 @@ const SelectPriceRangeCustom: React.FC = ({ increase={selectPool.increaseMinTick} currentPriceStr={currentPriceStr} setIsChangeMinMax={selectPool.setIsChangeMinMax} - priceRangeType={priceRangeType} + // priceRangeType={priceRangeType} /> = ({ increase={selectPool.increaseMaxTick} currentPriceStr={currentPriceStrReverse} setIsChangeMinMax={selectPool.setIsChangeMinMax} - priceRangeType={priceRangeType} + // priceRangeType={priceRangeType} />
From 1e97515c9b0167544f3e69da60e1fbd9f992bc4e Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Fri, 3 May 2024 08:48:47 +0700 Subject: [PATCH 30/37] fix: compile error --- .../SelectPriceRangeCutomController.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.stories.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.stories.tsx index d25cec5f7..d79a60ce8 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.stories.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.stories.tsx @@ -1,4 +1,4 @@ -import SelectPriceRangeCutomController, { type SelectPriceRangeCutomControllerProps } from "./SelectPriceRangeCutomController"; +import SelectPriceRangeCutomController, { type SelectPriceRangeCustomControllerProps } from "./SelectPriceRangeCutomController"; import { Meta, StoryObj } from "@storybook/react"; export default { @@ -6,7 +6,7 @@ export default { component: SelectPriceRangeCutomController, } as Meta; -export const Default: StoryObj = { +export const Default: StoryObj = { args: { current: 123123, title: "GNOS per GNOT" From e7eff0f0b8ec74117bcb58feef349cb1f403dd29 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Fri, 3 May 2024 11:20:23 +0700 Subject: [PATCH 31/37] refactor: exchange rate format application for earn/pool page --- .../common/exchange-rate/ExchangeRate.tsx | 20 ++--- .../SelectPriceRangeCutomController.tsx | 48 ++++++----- .../ExchangeRateGraph.styles.ts | 4 + .../exchange-rate-graph/ExchangeRateGraph.tsx | 10 +++ .../PoolPairInfoContent.tsx | 86 +++++++++---------- packages/web/src/utils/number-utils.ts | 28 +++++- .../web/src/utils/stake-position-utils.ts | 19 ++-- 7 files changed, 128 insertions(+), 87 deletions(-) create mode 100644 packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.styles.ts create mode 100644 packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.tsx diff --git a/packages/web/src/components/common/exchange-rate/ExchangeRate.tsx b/packages/web/src/components/common/exchange-rate/ExchangeRate.tsx index 8d82fb374..5a892537b 100644 --- a/packages/web/src/components/common/exchange-rate/ExchangeRate.tsx +++ b/packages/web/src/components/common/exchange-rate/ExchangeRate.tsx @@ -1,25 +1,19 @@ -import { removeTrailingZeros } from "@utils/number-utils"; +import { formatExchangeRate } from "@utils/number-utils"; +import { useMemo } from "react"; import { ExchangeRateWrapper } from "./ExchangeRate.styles"; interface Props { value: any; } -function countZeros(decimalFraction: string) { - const scientificNotation = parseFloat(decimalFraction).toExponential(); - const exponent = parseFloat(scientificNotation.split("e")[1]); - return Math.abs(exponent); -} - const ExchangeRate: React.FC = ({ value }) => { - const temp = `${value}`; - const numberOfZero = countZeros(value); - if (Number(value) === 0) return <>0; - if (Number(value[0]) !== 0 || (Number(value) < 0.000001 && Number(value) >= 0.00001)) return <>{removeTrailingZeros(value)}; + value >= 147 && console.log(value); + + const exchangePrice = useMemo(() => formatExchangeRate(value), [value]); + return ( - 0.{numberOfZero > 1 ? 0 : ""}{numberOfZero - 1} - {removeTrailingZeros(temp.slice(numberOfZero + 1, numberOfZero + 6))} + {exchangePrice} ); }; diff --git a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx index 9b46cbc77..f5e27cff4 100644 --- a/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx +++ b/packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx @@ -40,7 +40,7 @@ export interface SelectPriceRangeCustomControllerRef { } const SelectPriceRangeCustomController = forwardRef< - SelectPriceRangeCustomControllerRef, + SelectPriceRangeCustomControllerRef, SelectPriceRangeCustomControllerProps >(({ title, @@ -59,7 +59,7 @@ const SelectPriceRangeCustomController = forwardRef< const [displayValue, setDisplayValue] = useState(""); const [changed, setChanged] = useState(false); const [fontSize, setFontSize] = useState(24); - + const submitCountRef = useRef(0); const disabledController = useMemo(() => { @@ -115,9 +115,9 @@ const SelectPriceRangeCustomController = forwardRef< setDisplayValue(greaterThan1Transform(BigNumber(value).toFixed())); return; } - + setDisplayValue(subscriptFormat(BigNumber(value).toFixed())); - },[feeTier]); + }, [feeTier]); const onBlur = useCallback(() => { if (!changed) { @@ -125,10 +125,10 @@ const SelectPriceRangeCustomController = forwardRef< } setChanged(false); const currentValue = BigNumber(Number(displayValue)); - + const nearPrice = findNearPrice(currentValue.toNumber(), tickSpacing); - if(nearPrice !== current) { + if (nearPrice !== current) { changePrice(nearPrice); } else { formatControllerValue(nearPrice); @@ -142,35 +142,37 @@ const SelectPriceRangeCustomController = forwardRef< }, [changed, displayValue, tickSpacing, current, setIsChangeMinMax, selectedFullRange, changePrice, formatControllerValue, onSelectCustomRange]); useImperativeHandle(ref, () => { - return { formatData: () => { - return; - }}; + return { + formatData: () => { + return; + } + }; }, []); useEffect(() => { formatControllerValue(current); }, [current, formatControllerValue]); - + const exchangePrice = useMemo(() => { if (current === null || BigNumber(Number(current)).isNaN()) { return "-"; } - + const currentValue = BigNumber(current).toNumber(); const { maxPrice } = SwapFeeTierMaxPriceRangeMap[feeTier]; - - if (currentValue < 1 && currentValue !== 0) { + + if (currentValue < 1 && currentValue !== 0) { return subscriptFormat(BigNumber(current).toFixed()); } - + if (currentValue / maxPrice > 0.9) { return "∞"; } - + return convertToKMB(Number(current).toFixed()); }, [current, feeTier]); - + const priceValueString = ( <> 1 {token0Symbol} = {exchangePrice} {token1Symbol} @@ -181,9 +183,9 @@ const SelectPriceRangeCustomController = forwardRef< const number = Number(numStr); const significantNumber = 5; - const [intPart] = numStr.split("."); + const [intPart] = numStr.split("."); - if(intPart.length >= significantNumber) { + if (intPart.length >= significantNumber) { const originalNumber = number; const digitCountRatio = Math.pow(10, intPart.length - significantNumber); @@ -198,7 +200,7 @@ const SelectPriceRangeCustomController = forwardRef< useEffect(() => { const maxDefaultLength = 7; - if(displayValue.length < maxDefaultLength) { + if (displayValue.length < maxDefaultLength) { setFontSize(24); return; } @@ -207,14 +209,14 @@ const SelectPriceRangeCustomController = forwardRef< }, [displayValue]); const ratioDisplay = useMemo(() => { - if(isNumber(current ?? "") && Number(current) >= 1) { + if (isNumber(current ?? "") && Number(current) >= 1) { return convertToKMB(Number(current).toFixed(4)); } - - if(current) { + + if (current) { return subscriptFormat(current); } - + return displayValue; }, [current, displayValue]); diff --git a/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.styles.ts b/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.styles.ts new file mode 100644 index 000000000..2aa2a2f26 --- /dev/null +++ b/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.styles.ts @@ -0,0 +1,4 @@ +import styled from "@emotion/styled"; + +export const ExchangeRateGraphWrapper = styled.div` +`; \ No newline at end of file diff --git a/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.tsx b/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.tsx new file mode 100644 index 000000000..6f5cdc94e --- /dev/null +++ b/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import { ExchangeRateGraphWrapper } from "./ExchangeRateGraph.styles"; + + +function ExchangeRateGraph() { + return ( + ); +} + +export default ExchangeRateGraph; \ No newline at end of file diff --git a/packages/web/src/components/pool/pool-pair-info-content/PoolPairInfoContent.tsx b/packages/web/src/components/pool/pool-pair-info-content/PoolPairInfoContent.tsx index c1272b1b8..cfa01593c 100644 --- a/packages/web/src/components/pool/pool-pair-info-content/PoolPairInfoContent.tsx +++ b/packages/web/src/components/pool/pool-pair-info-content/PoolPairInfoContent.tsx @@ -40,7 +40,7 @@ const PoolPairInfoContent: React.FC = ({ const themeKey = useAtomValue(ThemeState.themeKey); const { width } = useWindowSize(); const GRAPWIDTH = Math.min(width - (width > 767 ? 224 : 80), 1216); - + const tokenABalance = useMemo(() => { return makeDisplayTokenAmount(pool.tokenA, pool.tokenABalance) || 0; }, [pool.tokenA, pool.tokenABalance]); @@ -48,7 +48,7 @@ const PoolPairInfoContent: React.FC = ({ const tokenBBalance = useMemo(() => { return makeDisplayTokenAmount(pool.tokenB, pool.tokenBBalance) || 0; }, [pool.tokenB, pool.tokenBBalance]); - + const depositRatio = useMemo(() => { const sumOfBalances = tokenABalance + tokenBBalance; if (sumOfBalances === 0) { @@ -68,11 +68,11 @@ const PoolPairInfoContent: React.FC = ({ }, [depositRatio]); const liquidityValue = useMemo((): string => { - return toUnitFormat(pool.tvl, true, true); + return toUnitFormat(pool.tvl, true, true); }, [pool.tvl]); const volumeValue = useMemo((): string => { - return toUnitFormat(pool.volume24h, true, true); + return toUnitFormat(pool.volume24h, true, true); }, [pool.volume24h]); const aprValue = useMemo(() => { @@ -94,7 +94,7 @@ const PoolPairInfoContent: React.FC = ({ }, [pool.volumeChange]); const feeChangedStr = useMemo((): string => { - return toUnitFormat(pool.feeChange, true, true); + return toUnitFormat(pool.feeChange, true, true); }, [pool.feeChange]); const rewardChangedStr = useMemo((): string => { @@ -124,17 +124,17 @@ const PoolPairInfoContent: React.FC = ({

TVL

{loading && - } + } {!loading &&
{liquidityValue}
- {pool.tvlChange >=0 ? : ""} = 0 ? "positive" : "negative"}> {liquidityChangedStr} + {pool.tvlChange >= 0 ? : ""} = 0 ? "positive" : "negative"}> {liquidityChangedStr}
}
- {!loading &&<> + {!loading && <>
= ({ } {loading && - } + }
@@ -171,10 +171,10 @@ const PoolPairInfoContent: React.FC = ({
} {loading && - - } + + }
All-Time Volume {!loading &&
@@ -183,33 +183,33 @@ const PoolPairInfoContent: React.FC = ({ {loading && }

APR

- {!loading && - } - > - {aprValue} - } + {!loading && + } + > + {aprValue} + } {loading && - + }
Fees 24h {!loading && {feeChangedStr}} {loading && - + }
@@ -217,9 +217,9 @@ const PoolPairInfoContent: React.FC = ({ Rewards 24h {!loading && {rewardChangedStr}} {loading && - + }
@@ -237,19 +237,19 @@ const PoolPairInfoContent: React.FC = ({ width={20} className="image-logo" /> - {width >=768 && `1 ${pool?.tokenA?.symbol}`} = {pool?.tokenB?.symbol} + {width >= 768 && `1 ${pool?.tokenA?.symbol}`} = {pool?.tokenB?.symbol}
} {loading && - - } - + + } + {loading && - - } + + } {!loading &&
= ({ width={20} className="image-logo" /> - {width >=768 && `1 ${pool?.tokenB?.symbol}`} = 400 ? 6 : 2 ))}`, 6)}/> {pool?.tokenA?.symbol} + {width >= 768 && `1 ${pool?.tokenB?.symbol}`} = 400 ? 6 : 2))}`, 6)} /> {pool?.tokenA?.symbol}
}
diff --git a/packages/web/src/utils/number-utils.ts b/packages/web/src/utils/number-utils.ts index b7a40293e..0f0f1e690 100644 --- a/packages/web/src/utils/number-utils.ts +++ b/packages/web/src/utils/number-utils.ts @@ -3,6 +3,7 @@ import { unitsLowerCase, unitsUpperCase, } from "@common/values/global-initial-value"; +import { SwapFeeTierMaxPriceRangeMap, SwapFeeTierType } from "@constants/option.constant"; import BigNumber from "bignumber.js"; import { convertToKMB, convertToMB } from "./stake-position-utils"; @@ -290,13 +291,12 @@ export function removeTrailingZeros(value: string) { return value.replace(/\.?0+$/, ""); } -function countZeros(decimalFraction: string) { +export function countZeros(decimalFraction: string) { const scientificNotation = parseFloat(decimalFraction).toExponential(); const exponent = parseFloat(scientificNotation.split("e")[1]); return Math.abs(exponent); } - export function subscriptFormat(number: string | number) { const numberStr = number.toString(); const numberOfZero = countZeros(numberStr); @@ -307,4 +307,26 @@ export function subscriptFormat(number: string | number) { const result = `0.0${String.fromCharCode(8320 + Number(numberOfZero - 1))}${removeTrailingZeros(numberStr.slice(numberOfZero + 1, numberOfZero + 6))}`; return result; -} \ No newline at end of file +} + +export function formatExchangeRate(value: number, options?: { feeTier?: SwapFeeTierType}) { + const valueStr = value.toString(); + + const range = options?.feeTier ? SwapFeeTierMaxPriceRangeMap[options?.feeTier] : null; + + if (valueStr === null || BigNumber(Number(valueStr)).isNaN()) { + return "-"; + } + + const currentValue = BigNumber(valueStr).toNumber(); + + if (range && currentValue / range.maxPrice > 0.9) { + return "∞"; + } + + if (currentValue < 1 && currentValue !== 0) { + return subscriptFormat(BigNumber(value).toFixed()); + } + + return convertToKMB(Number(value).toString()); +} diff --git a/packages/web/src/utils/stake-position-utils.ts b/packages/web/src/utils/stake-position-utils.ts index c4de42e3d..f67a5f47f 100644 --- a/packages/web/src/utils/stake-position-utils.ts +++ b/packages/web/src/utils/stake-position-utils.ts @@ -1,4 +1,5 @@ import BigNumber from "bignumber.js"; +import { removeTrailingZeros } from "./number-utils"; export const convertToMB = (price: string, maximumFractionDigits?: number) => { if (Number.isNaN(Number(price))) return "-"; @@ -40,14 +41,22 @@ export const convertToKMB = ( minimumFractionDigits?: number, ) => { if (Number.isNaN(Number(price))) return "-"; - if (Math.floor(Number(price)).toString().length < 4) { + + const significantNumber = 5; + const convertOffset = 999; + const intPart = Math.trunc(Number(price)); + + if (intPart < convertOffset) { if (Number.isInteger(Number(price))) return `${Number(price)}`; if (Number(price) < 0.000001 && Number(price) !== 0) return "0.000001"; if (Number(price) < 1) return `${Number(Number(price).toFixed(6))}`; - return Number(price).toLocaleString("en-US", { - maximumFractionDigits: maximumFractionDigits ?? 2, - minimumFractionDigits: minimumFractionDigits ?? 2, - }); + + const defaultDecimalDigit = significantNumber - intPart.toString().length; + + return removeTrailingZeros(Number(price).toLocaleString("en-US", { + maximumFractionDigits: maximumFractionDigits ?? defaultDecimalDigit, + minimumFractionDigits: minimumFractionDigits ?? defaultDecimalDigit, + })); } else { const temp = Math.floor(Number(price)); if (temp >= 1e9) { From e05f9aae622f4c1580a5dbb3ae37c56fa30b589a Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Mon, 6 May 2024 09:06:00 +0700 Subject: [PATCH 32/37] feat: exchange rate graph ui --- .../ChartScopeSelectTab.spec.tsx | 24 + .../ChartScopeSelectTab.stories.tsx | 22 + .../ChartScopeSelectTab.styles.ts | 46 + .../ChartScopeSelectTab.tsx | 30 + .../common/line-graph/LineGraph.styles.ts | 3 + .../common/line-graph/LineGraph.tsx | 103 +- .../common/pair-ratio/PairRatio.styles.ts | 27 + .../common/pair-ratio/PairRatio.tsx | 58 + .../tvl-chart-graph/TvlChartGraph.tsx | 2 +- .../EarnAddLiquidity.styles.ts | 2 +- .../ExchangeRateGraphContent.styles.ts | 79 + .../ExchangeRateGraphContent.tsx | 178 ++ .../ExchangeRateGraph.styles.ts | 45 + .../exchange-rate-graph/ExchangeRateGraph.tsx | 43 +- .../pool/my-position-card/MyPositionCard.tsx | 49 +- packages/web/src/constants/option.constant.ts | 10 +- .../ExchangeRateGraphContainer.tsx | 46 + .../tvl-chart-container/TvlChartContainer.tsx | 7 +- .../earn-add-layout/EarnAddLayout.styles.ts | 20 +- .../layouts/earn-add-layout/EarnAddLayout.tsx | 9 +- .../layouts/pool-add-layout/PoolAddLayout.tsx | 1 + packages/web/src/pages/earn/add.tsx | 9 +- .../src/pages/earn/pool/[pool-path]/add.tsx | 5 +- .../dashboard/dashboard-repository-impl.ts | 1 + .../web/src/repositories/dashboard/res.ts | 1451 +++++++++++++++++ .../dashboard/response/tvl-response.ts | 4 +- .../token/mock/token-exchange-rate-graph.json | 845 ++++++++++ .../response/token-exchange-rate-response.ts | 12 + .../token/token-repository-impl.ts | 6 + .../repositories/token/token-repository.ts | 3 + 30 files changed, 3084 insertions(+), 56 deletions(-) create mode 100644 packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.spec.tsx create mode 100644 packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.stories.tsx create mode 100644 packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.styles.ts create mode 100644 packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.tsx create mode 100644 packages/web/src/components/common/pair-ratio/PairRatio.styles.ts create mode 100644 packages/web/src/components/common/pair-ratio/PairRatio.tsx create mode 100644 packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.styles.ts create mode 100644 packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.tsx create mode 100644 packages/web/src/containers/exchange-rate-graph-container/ExchangeRateGraphContainer.tsx create mode 100644 packages/web/src/repositories/dashboard/res.ts create mode 100644 packages/web/src/repositories/token/mock/token-exchange-rate-graph.json create mode 100644 packages/web/src/repositories/token/response/token-exchange-rate-response.ts diff --git a/packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.spec.tsx b/packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.spec.tsx new file mode 100644 index 000000000..cc6049601 --- /dev/null +++ b/packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.spec.tsx @@ -0,0 +1,24 @@ +import { render } from "@testing-library/react"; +import { Provider as JotaiProvider } from "jotai"; +import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider"; +import ChartScopeSelectTab, { TAB_SIZE } from "./ChartScopeSelectTab"; +import { CHART_TYPE } from "@constants/option.constant"; + +describe("ChartScopeSelectTab Component", () => { + it("ChartScopeSelectTab render", () => { + const mockProps = { + selected: "All" as CHART_TYPE, + onChange: () => null, + list: [], + size: "MEDIUM" as TAB_SIZE, + }; + + render( + + + + + , + ); + }); +}); diff --git a/packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.stories.tsx b/packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.stories.tsx new file mode 100644 index 000000000..445c5c240 --- /dev/null +++ b/packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.stories.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { action } from "@storybook/addon-actions"; +import VolumeChartSelectTabV2 from "./ChartScopeSelectTab"; +import { ACTIVITY_TYPE } from "@containers/dashboard-activities-container/DashboardActivitiesContainer"; +import { CHART_TYPE } from "@constants/option.constant"; +import ChartScopeSelectTab from "./ChartScopeSelectTab"; + +export default { + title: "earn/ChartScopeSelectTab", + component: ChartScopeSelectTab, +} as ComponentMeta; + +const Template: ComponentStory = args => ( + +); + +export const Default = Template.bind({}); +Default.args = { + selected: CHART_TYPE["7D"], + onChange: action("changeVolumeChartType"), +}; diff --git a/packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.styles.ts b/packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.styles.ts new file mode 100644 index 000000000..349be43d5 --- /dev/null +++ b/packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.styles.ts @@ -0,0 +1,46 @@ +import { fonts } from "@constants/font.constant"; +import styled from "@emotion/styled"; +import { media } from "@styles/media"; +import mixins from "@styles/mixins"; +import { TAB_SIZE } from "./ChartScopeSelectTab"; + +interface ChartScopeSelectTabWrapperProps { + $hasBorder?: boolean; + size: TAB_SIZE; +} + +export const ChartScopeSelectTabWrapper = styled.div` + ${mixins.flexbox("row", "center", "center")}; + + ${(props) => + props.$hasBorder ? ({ theme }) => theme.color.border01 : ""} + .tab-button {} + .tab-button { + ${fonts.p6}; + width: ${(props) => { + switch (props.size) { + case "SMALL": + return "50px"; + case "MEDIUM": + default: + return "60px"; + } + }}; + height: ${(props) => { + switch (props.size) { + case "SMALL": + return "21px"; + case "MEDIUM": + default: + return "37px"; + } + }}; + padding: 0px 8px; + ${media.mobile} { + flex: 1; + ${fonts.body12}; + padding: 4px 24px; + height: 26px; + } + } +`; diff --git a/packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.tsx b/packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.tsx new file mode 100644 index 000000000..0e37de72a --- /dev/null +++ b/packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import SelectTab from "@components/common/select-tab/SelectTab"; +import { ChartScopeSelectTabWrapper } from "./ChartScopeSelectTab.styles"; + +export type TAB_SIZE = "MEDIUM" | "SMALL"; + +interface ChartScopeSelectTabProps { + selected: T; + onChange: (newType: T) => void; + list: T[] + size: TAB_SIZE; +} + +const ChartScopeSelectTab = ({ + selected, + onChange, + list, + size, +}: React.PropsWithChildren>) => ( + + onChange(value as T)} + buttonClassName={"tab-button"} + /> + +); + +export default ChartScopeSelectTab; diff --git a/packages/web/src/components/common/line-graph/LineGraph.styles.ts b/packages/web/src/components/common/line-graph/LineGraph.styles.ts index 436155356..f5412f005 100644 --- a/packages/web/src/components/common/line-graph/LineGraph.styles.ts +++ b/packages/web/src/components/common/line-graph/LineGraph.styles.ts @@ -24,6 +24,9 @@ export const LineGraphWrapper = styled.div` ${media.mobile} { height: 252px; } + .y-axis-number { + ${fonts.p6} + } } `; diff --git a/packages/web/src/components/common/line-graph/LineGraph.tsx b/packages/web/src/components/common/line-graph/LineGraph.tsx index fa4293e07..1bda5c364 100644 --- a/packages/web/src/components/common/line-graph/LineGraph.tsx +++ b/packages/web/src/components/common/line-graph/LineGraph.tsx @@ -1,10 +1,11 @@ import BigNumber from "bignumber.js"; -import React, { useCallback, useEffect, useState, useMemo } from "react"; +import React, { useCallback, useEffect, useState, useMemo, useRef } from "react"; import { LineGraphTooltipWrapper, LineGraphWrapper } from "./LineGraph.styles"; import FloatingTooltip from "../tooltip/FloatingTooltip"; -import { Global, css } from "@emotion/react"; -import { prettyNumber, removeTrailingZeros } from "@utils/number-utils"; +import { Global, css, useTheme } from "@emotion/react"; +import { prettyNumber, removeTrailingZeros, subscriptFormat } from "@utils/number-utils"; import { getLocalizeTime } from "@utils/chart"; +import { convertToKMB } from "@utils/stake-position-utils"; function calculateSmoothing(pointA: Point, pointB: Point) { const lengthX = pointB.x - pointA.x; @@ -69,6 +70,12 @@ export interface LineGraphProps { typeOfChart?: string; customData?: { height: number; locationTooltip: number }; centerLineColor?: string; + showBaseLine?: boolean; + renderBottom?: (baseLineNumberWidth: number) => React.ReactElement +} + +export interface LineGraphRef { + getBaseLineNumberWidth: () => number; } interface Point { @@ -118,7 +125,7 @@ function parseTimeTVL(time: string) { }; } -const LineGraph: React.FC = ({ +const LineGraph = ({ className = "", cursor, color, @@ -133,14 +140,21 @@ const LineGraph: React.FC = ({ firstPointColor, centerLineColor, customData = { height: 0, locationTooltip: 0 }, -}) => { + showBaseLine, + renderBottom, +}: LineGraphProps) => { const COMPONENT_ID = (Math.random() * 100000).toString(); const [activated, setActivated] = useState(false); const [currentPoint, setCurrentPoint] = useState(); const [chartPoint, setChartPoint] = useState(); const [currentPointIndex, setCurrentPointIndex] = useState(-1); const [points, setPoints] = useState([]); + const [baseLineYAxis, setBaseLineYAxis] = useState([]); + const [baseLineNumberWidth, setBaseLineNumberWidth] = useState(0); const { height: customHeight = 0, locationTooltip } = customData; + const chartRef = useRef(null); + const baseLineCount = useMemo(() => 4, []); + const theme = useTheme(); const isFocus = useCallback(() => { return activated && cursor; @@ -159,6 +173,7 @@ const LineGraph: React.FC = ({ value: new BigNumber(data.value).toNumber(), time: new Date(data.time).getTime(), })); + const gapRatio = 0.1; const values = mappedDatas.map(data => data.value); const times = mappedDatas.map(data => data.time); @@ -168,25 +183,74 @@ const LineGraph: React.FC = ({ const minTime = Math.min(...times); const maxTime = Math.max(...times); + let baseLineNumberWidthComputation = 0; + + if (showBaseLine) { + const baseLineData = new Array(baseLineCount).fill("").map((value, index) => { + const minMaxGap = maxValue - minValue; + const additionalGap = minMaxGap * (gapRatio / 2); + const baseLineGap = minMaxGap * (1 + gapRatio); + const bottomBaseLineValue = minValue - additionalGap; + + const currentBaseLineValue = bottomBaseLineValue + (index / (baseLineCount - 1)) * baseLineGap; + + if (currentBaseLineValue < 1) { + return subscriptFormat(currentBaseLineValue.toString()); + } + + return convertToKMB(currentBaseLineValue.toString()); + }); + + setBaseLineYAxis([...baseLineData]); + + const maxLength = 7; + + baseLineNumberWidthComputation = (() => { + if (!showBaseLine) return 0; + + const longestNumber = baseLineData.reduce((prev, current) => { + if (current.length > prev.length) { + return current; + } + return prev; + }); + + return longestNumber.length / maxLength * 44; + })(); + + setBaseLineNumberWidth(baseLineNumberWidthComputation); + } + const optimizeValue = function (value: number, height: number) { + // The base line wrapper will > top and bottom of graph 10 % so the height will be 110% of graph height + const graphHeight = showBaseLine ? height * (1 / 1.1) : height; + + // Subtract 5% from the top baseline + const topFrontierHeight = showBaseLine ? height * (1.05 / 1.1) : height; + return ( - height - + // (top frontier height) - (distance from point to bottom) = (point top top) + topFrontierHeight - + // gap between point and bottom new BigNumber(value - minValue) - .multipliedBy(height) + // gap ratio between gap to bottom and largest gap (max - min) .dividedBy(maxValue - minValue) + // precise distance from point to bottom + .multipliedBy(graphHeight) .toNumber() ); }; const optimizeTime = function (time: number, width: number) { return new BigNumber(time - minTime) - .multipliedBy(width) + .multipliedBy(width - baseLineNumberWidthComputation) .dividedBy(maxTime - minTime) .toNumber(); }; + const points = mappedDatas.map(data => ({ - x: optimizeTime(data.time, width), + x: optimizeTime(data.time, width) + baseLineNumberWidthComputation, y: optimizeValue(data.value, height), })); setPoints(points); @@ -323,7 +387,7 @@ const LineGraph: React.FC = ({ // Draw the line chart path for (let i = 1; i < points.length; i++) { - path += smooth ? bezierCommand(points[i], i, points) : ` L ${points[i].x},${points[i].y}`; + path += smooth ? bezierCommand(points[i], i, points) : ` L ${points[i].x},${points[i].y}`; } // Draw a line straight down to the bottom of the chart @@ -338,6 +402,8 @@ const LineGraph: React.FC = ({ return path; }, [height, points, smooth]); + const offsetPixel = useMemo(() => 5, []); + return ( = ({ {parseTimeTVL(datas[currentPointIndex]?.time)?.date || "0"} {location.pathname !== "/dashboard" && - + {currentPointIndex === datas.length - 1 ? parseTimeTVL(getLocalizeTime(new Date().toString())).time : parseTimeTVL(datas[currentPointIndex]?.time)?.time || "0"} }
@@ -382,7 +448,19 @@ const LineGraph: React.FC = ({ - + + {showBaseLine && <> + { + baseLineYAxis.map((value, index) => { + const currentHeight = height - (height * index / (baseLineCount - 1)); + + return <> + + {value} + ; + }) + } + } = ({ + {renderBottom && renderBottom(baseLineNumberWidth)} ); }; diff --git a/packages/web/src/components/common/pair-ratio/PairRatio.styles.ts b/packages/web/src/components/common/pair-ratio/PairRatio.styles.ts new file mode 100644 index 000000000..a102af3df --- /dev/null +++ b/packages/web/src/components/common/pair-ratio/PairRatio.styles.ts @@ -0,0 +1,27 @@ +import { fonts } from "@constants/font.constant"; +import styled from "@emotion/styled"; +import mixins from "@styles/mixins"; + +export const PairRatioWrapper = styled.div` + ${mixins.flexbox("row", "center", "center")}; + ${fonts.body12} + gap: 4px; + text-align: center; + color: ${({ theme }) => theme.color.text10}; + .icon-wrapper { + ${mixins.flexbox("row", "center", "center")}; + } + svg { + cursor: pointer; + * { + fill: ${({ theme }) => theme.color.icon03}; + } + } + svg:hover * { + fill: ${({ theme }) => theme.color.icon07}; + } + .image-logo { + width: 20px; + height: 20px; + } +`; \ No newline at end of file diff --git a/packages/web/src/components/common/pair-ratio/PairRatio.tsx b/packages/web/src/components/common/pair-ratio/PairRatio.tsx new file mode 100644 index 000000000..ba017782b --- /dev/null +++ b/packages/web/src/components/common/pair-ratio/PairRatio.tsx @@ -0,0 +1,58 @@ +import { pulseSkeletonStyle } from "@constants/skeleton.constant"; +import { SkeletonEarnDetailWrapper } from "@layouts/pool-layout/PoolLayout.styles"; +import { TokenModel } from "@models/token/token-model"; +import { formatExchangeRate } from "@utils/number-utils"; +import IconSwap from "../icons/IconSwap"; +import MissingLogo from "../missing-logo/MissingLogo"; +import { PairRatioWrapper } from "./PairRatio.styles"; + +interface PairRatioProps { + loading?: boolean; + onSwap?: (swap: boolean) => void; + isSwap?: boolean; + tokenA: TokenModel; + tokenB: TokenModel; + showSwapBtn?: boolean; + feeTier: string; +} + +export function PairRatio({ + loading = false, + isSwap = false, + onSwap, + tokenA, + tokenB, + showSwapBtn, +}: PairRatioProps) { + return ( + {!loading && ( + + )} + {!loading &&
1 {tokenA.symbol} = {formatExchangeRate(1.123812783)} {tokenB.symbol}
} + {showSwapBtn && !loading && ( +
onSwap?.(!isSwap)} + > + +
+ )} + {loading && ( + + + + )} + {loading && ( + + + + )} + ); +} + +export default PairRatio; \ No newline at end of file diff --git a/packages/web/src/components/dashboard/tvl-chart-graph/TvlChartGraph.tsx b/packages/web/src/components/dashboard/tvl-chart-graph/TvlChartGraph.tsx index c125bee00..552cdb2ce 100644 --- a/packages/web/src/components/dashboard/tvl-chart-graph/TvlChartGraph.tsx +++ b/packages/web/src/components/dashboard/tvl-chart-graph/TvlChartGraph.tsx @@ -78,7 +78,7 @@ const TvlChartGraph: React.FC = ({ cursor className="graph" width={size.width} - height={size.height - 36} + height={size.height} color={theme.color.background04Hover} strokeWidth={1} datas={getDatas()} diff --git a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.styles.ts b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.styles.ts index c9d5534cd..ce7eb7cea 100644 --- a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.styles.ts +++ b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.styles.ts @@ -13,7 +13,7 @@ export const EarnAddLiquidityWrapper = styled.section` border-radius: 8px; border: 1px solid ${({ theme }) => theme.color.border02}; box-shadow: ${({ theme }) => theme.color.shadow01}; - padding: 23px; + padding: 24px; .button-submit { height: 57px; span { diff --git a/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.styles.ts b/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.styles.ts new file mode 100644 index 000000000..208144be8 --- /dev/null +++ b/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.styles.ts @@ -0,0 +1,79 @@ +import { fonts } from "@constants/font.constant"; +import styled from "@emotion/styled"; +import { media } from "@styles/media"; +import mixins from "@styles/mixins"; + +export const ExchangeRateGraphContentWrapper = styled.div` + ${mixins.flexbox("column", "flex-start", "flex-start")}; + width: 100%; + background-color: ${({ theme }) => theme.color.background15}; + border-radius: 8px; + padding: 0 0 12px 0; + ${media.mobile} { + padding: 0 0 4px 0; + } + + .data-wrapper { + width: 100%; + ${mixins.flexbox("column", "center", "end")}; + align-items: end; + .graph-wrap { + ${mixins.flexbox("column", "flex-start", "flex-start")}; + width: 100%; + } + + .graph { + height: 204px; + cursor: default; + & svg { + height: 204px; + .line-chart-g { + transform: translateY(24px); + } + } + } + } + + .yaxis-wrapper { + display: flex; + flex-direction: column-reverse; + justify-content: space-between; + + span { + ${fonts.body12}; + color: ${({ theme }) => theme.color.text04}; + } + } +`; + +export const ExchangeRateGraphContentHeader = styled.div` + display: flex; + width: 100%; + ${mixins.flexbox("row", "center", "space-between")} +`; + +export const ExchangeRateGraphXAxisWrapper = styled.div<{ innerWidth: string }>` + width: 100%; + ${mixins.flexbox("row", "center", "end")} + .exchange-rate-graph-xaxis { + width: ${({ innerWidth }) => innerWidth}; + ${mixins.flexbox("row", "center", "space-between")}; + height: 17px; + flex-shrink: 0; + padding: 0 12px; + ${media.mobile} { + margin-top: 4px; + height: 13px; + padding: 0 4px; + } + ${fonts.p6}; + color: ${({ theme }) => theme.color.text04}; + text-align: center; + span { + ${media.mobile} { + ${fonts.p7}; + } + color: ${({ theme }) => theme.color.text04}; + } + } +`; diff --git a/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.tsx b/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.tsx new file mode 100644 index 000000000..6c962f055 --- /dev/null +++ b/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.tsx @@ -0,0 +1,178 @@ +import ChartScopeSelectTab from "@components/common/chart-scope-select-tab/ChartScopeSelectTab"; +import LineGraph from "@components/common/line-graph/LineGraph"; +import { CHART_DAY_SCOPE_TYPE } from "@constants/option.constant"; +import { useTheme } from "@emotion/react"; +import useComponentSize from "@hooks/common/use-component-size"; +import { useWindowSize } from "@hooks/common/use-window-size"; +import { TokenModel } from "@models/token/token-model"; +import { TokenExchangeRateGraphResponse } from "@repositories/token/response/token-exchange-rate-response"; +import { DEVICE_TYPE } from "@styles/media"; +import { getLocalizeTime, parseDate } from "@utils/chart"; +import { useMemo, useState } from "react"; +import PairRatio from "../../common/pair-ratio/PairRatio"; +import { ExchangeRateGraphContentHeader, ExchangeRateGraphContentWrapper, ExchangeRateGraphXAxisWrapper } from "./ExchangeRateGraphContent.styles"; + +interface ExchangeRateGraphContentProps { + tokenA: TokenModel; + tokenB: TokenModel; + feeTier: string; + onSwap?: (swap: boolean) => void + data?: TokenExchangeRateGraphResponse +} + +const calculateMiddleIndices = (totalLabels = 0, countXAxis = 0) => { + const indices = new Set(); + // Helper function to add indices + const addIndices = (start: number, end: number) => { + const mid = Math.floor((start + end) / 2); + if (!indices.has(mid)) { + indices.add(mid); + if (indices.size < countXAxis) { + // Add midpoint of the left subarray + addIndices(start, mid - 1); + // Add midpoint of the right subarray + addIndices(mid + 1, end); + } + } + }; + + // Always include the first and last labels + indices.add(0); + indices.add(totalLabels - 1); + + // Begin by adding the middle of the entire array + addIndices(0, totalLabels - 1); + + // Convert to array and sort to ensure the correct order + return Array.from(indices).sort((a, b) => b - a); +}; + +function ExchangeRateGraphContent({ + tokenA, + tokenB, + onSwap, + data, +}: ExchangeRateGraphContentProps) { + const [selectedScope, setSelectedScope] = useState(CHART_DAY_SCOPE_TYPE["7D"]); + const theme = useTheme(); + const [componentRef, size] = useComponentSize(); + const { breakpoint } = useWindowSize(); + + const dataMemo = useMemo(() => { + const getCurrentData = () => { + switch (selectedScope) { + case "30D": + return data?.last1m; + case "ALL": + return data?.all; + case "7D": + default: + return data?.last7d; + } + }; + + return getCurrentData()?.map(item => ({ + time: item.time, + value: item.value.toString() + })).sort((a, b) => { + return new Date(b.time).getTime() - new Date(a.time).getTime(); + }).reduce( + (pre: any, next: any) => { + return [ + ...pre, + { + value: next.value || 0, + time: getLocalizeTime(next.time), + }, + ]; + }, + [], + ); + }, [data, selectedScope]); + + const xAxisLabels = useMemo(() => { + const getCurrentData = () => { + switch (selectedScope) { + case "30D": + return data?.last1m; + case "ALL": + return data?.all; + case "7D": + default: + return data?.last7d; + } + }; + + return getCurrentData()?.map(item => ({ + time: item.time, + value: item.value.toString() + })).sort((a, b) => { + return new Date(b.time).getTime() - new Date(a.time).getTime(); + }).reduce( + (pre: any, next: any) => { + const time = parseDate(next.time); + return [...pre, time]; + }, + [], + ); + }, [data, selectedScope]); + + const countXAxis = useMemo(() => { + if (breakpoint !== DEVICE_TYPE.MOBILE) + return Math.floor(((size.width || 0) + 20 - 25) / 100); + return Math.floor(((size.width || 0) + 20 - 8) / 80); + }, [size.width, breakpoint]); + + const labelIndicesToShow = useMemo(() => { + return calculateMiddleIndices(xAxisLabels?.length, Math.min(countXAxis, 4)); + }, [countXAxis, xAxisLabels?.length]); + + return ( + + + setSelectedScope(value)} + /> + +
+
+ { + console.log("🚀 ~ baseLineNumberWidth:", baseLineNumberWidth); + return +
+ {labelIndicesToShow.map((x, i) => ( + {xAxisLabels?.[x]} + ))} +
+ ; + }} + /> +
+
+ ); +} + +export default ExchangeRateGraphContent; + diff --git a/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.styles.ts b/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.styles.ts index 2aa2a2f26..d6fe9312d 100644 --- a/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.styles.ts +++ b/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.styles.ts @@ -1,4 +1,49 @@ +import { fonts } from "@constants/font.constant"; import styled from "@emotion/styled"; +import { media } from "@styles/media"; +import mixins from "@styles/mixins"; export const ExchangeRateGraphWrapper = styled.div` + ${mixins.flexbox("column", "flex-start", "flex-start")}; + background-color: ${({ theme }) => theme.color.background01}; + width: 430px; + padding: 16px; + border: 1px solid ${({ theme }) => theme.color.border02}; + border-radius: 8px; + gap: 16px; + + ${media.tablet} { + max-width: 500px; + width: 100%; + } +`; + +export const ExchangeRateGraphHeaderWrapper = styled.div` + ${fonts.body12} + color: ${({ theme }) => theme.color.text04}; + ${mixins.flexbox("row")}; + + .title { + margin-right: 4px; + } + + .tooltip-wrap { + width: 16px; + height: 16px; + & * { + ${mixins.flexbox("row", "center", "center")}; + } + .tooltip-icon { + width: 100%; + height: 100%; + * { + fill: ${({ theme }) => theme.color.icon03}; + } + } + } +`; + +export const TooltipContentWrapper = styled.div` + ${fonts.body12} + color: ${({ theme }) => theme.color.text02}; `; \ No newline at end of file diff --git a/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.tsx b/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.tsx index 6f5cdc94e..f0e9adad7 100644 --- a/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.tsx +++ b/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.tsx @@ -1,9 +1,46 @@ -import React from "react"; -import { ExchangeRateGraphWrapper } from "./ExchangeRateGraph.styles"; +import ExchangeRateGraphContent from "@components/pool/exchange-rate-graph-content/ExchangeRateGraphContent"; +import IconInfo from "@components/common/icons/IconInfo"; +import Tooltip from "@components/common/tooltip/Tooltip"; +import { TokenModel } from "@models/token/token-model"; +import { ExchangeRateGraphHeaderWrapper, ExchangeRateGraphWrapper, TooltipContentWrapper } from "./ExchangeRateGraph.styles"; +import { TokenExchangeRateGraphResponse } from "@repositories/token/response/token-exchange-rate-response"; +interface ExchangeRateGraphProps { + tokenA: TokenModel; + tokenB: TokenModel; + feeTier: string; + onSwap?: (swap: boolean) => void; + data?: TokenExchangeRateGraphResponse; +} -function ExchangeRateGraph() { +function ExchangeRateGraph({ + tokenA, + tokenB, + feeTier, + onSwap, + data, +}: ExchangeRateGraphProps) { return ( + +

Exchange Rate

+ {true && ( +
+ Exchange rate for the selected token pair.} + > + + +
+ )} + + ); } diff --git a/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx b/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx index 88f618103..d8513127e 100644 --- a/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx +++ b/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx @@ -142,7 +142,7 @@ const MyPositionCard: React.FC = ({ sumOfBalances === 0 ? 0.5 : token0Balance / - (token0Balance + token1Balance / position?.pool?.price); + (token0Balance + token1Balance / position?.pool?.price); return [ { token: tokenA, @@ -272,9 +272,9 @@ const MyPositionCard: React.FC = ({ return <>1 {tokenB?.symbol} = {tokenA?.symbol}; + )} /> {tokenA?.symbol}; } - return <>1 {tokenA?.symbol} = {tokenB?.symbol}; + return <>1 {tokenA?.symbol} = {tokenB?.symbol}; }, [ isSwap, tokenB?.symbol, @@ -303,7 +303,7 @@ const MyPositionCard: React.FC = ({ } return ( ((position.tickLower - currentTick) / (max - currentTick)) * - (GRAPH_WIDTH / 2) + + (GRAPH_WIDTH / 2) + GRAPH_WIDTH / 2 ); }, [GRAPH_WIDTH, position.pool.currentTick, position.tickLower, tickRange]); @@ -321,7 +321,7 @@ const MyPositionCard: React.FC = ({ } return ( ((position.tickUpper - currentTick) / (max - currentTick)) * - (GRAPH_WIDTH / 2) + + (GRAPH_WIDTH / 2) + GRAPH_WIDTH / 2 ); }, [GRAPH_WIDTH, position.pool.currentTick, position.tickUpper, tickRange]); @@ -340,8 +340,8 @@ const MyPositionCard: React.FC = ({ const tokenAPriceStr = isFullRange ? "0 " : !isSwap - ? Number(minPrice) - : convertToKMB(`${Number(1 / Number(maxPrice))}`, 6); + ? Number(minPrice) + : convertToKMB(`${Number(1 / Number(maxPrice))}`, 6); return `${tokenAPriceStr}`; }, [ position.tickUpper, @@ -391,8 +391,8 @@ const MyPositionCard: React.FC = ({ const tokenBPriceStr = isFullRange ? "∞ " : !isSwap - ? maxPrice - : convertToKMB(`${Number(1 / Number(minPrice))}`, 6); + ? maxPrice + : convertToKMB(`${Number(1 / Number(minPrice))}`, 6); return `${tokenBPriceStr}`; }, [ position.tickLower, @@ -410,20 +410,18 @@ const MyPositionCard: React.FC = ({ const minTickLabel = useMemo(() => { return (!isSwap ? -minTickRate : minTickRate) > 1000 ? ">999%" - : `${minTickRate < -1 ? "+" : ""}${ - Math.abs(minTickRate) > 0 && Math.abs(minTickRate) < 1 - ? "<1" - : Math.round(minTickRate * -1) - }%`; + : `${minTickRate < -1 ? "+" : ""}${Math.abs(minTickRate) > 0 && Math.abs(minTickRate) < 1 + ? "<1" + : Math.round(minTickRate * -1) + }%`; }, [minTickRate, isSwap]); const maxTickLabel = useMemo(() => { return maxTickRate === 999 ? `>${maxTickRate}%` : maxTickRate >= 1000 - ? ">999%" - : `${maxTickRate > 1 ? "+" : ""}${ - Math.abs(maxTickRate) < 1 ? "<1" : Math.round(maxTickRate) + ? ">999%" + : `${maxTickRate > 1 ? "+" : ""}${Math.abs(maxTickRate) < 1 ? "<1" : Math.round(maxTickRate) }%`; }, [maxTickRate]); @@ -487,13 +485,12 @@ const MyPositionCard: React.FC = ({
setCopy( - `${ - window.location.host + window.location.pathname + `${window.location.host + window.location.pathname }?addr=${address}#${position.id}`, ) } > - + {copied && (
@@ -546,7 +543,7 @@ const MyPositionCard: React.FC = ({ />
-
@@ -715,7 +712,7 @@ const MyPositionCard: React.FC = ({ {!loading && (
- 1 {(!isSwap ? tokenA : tokenB)?.symbol} = {" "} + 1 {(!isSwap ? tokenA : tokenB)?.symbol} = {" "} {(!isSwap ? tokenB : tokenA)?.symbol} ( {!isSwap ? minTickLabel : maxTickLabel} @@ -736,7 +733,7 @@ const MyPositionCard: React.FC = ({  
- ~ {(!isSwap ? tokenB : tokenA)?.symbol} ( + ~ {(!isSwap ? tokenB : tokenA)?.symbol} ( {!isSwap ? maxTickLabel : minTickLabel} @@ -757,7 +754,7 @@ const MyPositionCard: React.FC = ({
)}
- + ); diff --git a/packages/web/src/constants/option.constant.ts b/packages/web/src/constants/option.constant.ts index e37dc15f0..05d5873ae 100644 --- a/packages/web/src/constants/option.constant.ts +++ b/packages/web/src/constants/option.constant.ts @@ -225,10 +225,18 @@ export const CHART_TYPE = { "7D": "7D", "30D": "30D", "90D": "90D", - ALL: "ALL", + "ALL": "ALL", } as const; export type CHART_TYPE = ValuesType; +export const CHART_DAY_SCOPE_TYPE = { + "7D": "7D", + "30D": "30D", + "ALL": "ALL", +} as const; + +export type CHART_DAY_SCOPE_TYPE = ValuesType; + export type AddLiquidityType = "POOL" | "LIQUIDITY"; export type PriceRangeType = "Active" | "Passive" | "Custom"; diff --git a/packages/web/src/containers/exchange-rate-graph-container/ExchangeRateGraphContainer.tsx b/packages/web/src/containers/exchange-rate-graph-container/ExchangeRateGraphContainer.tsx new file mode 100644 index 000000000..866a92af9 --- /dev/null +++ b/packages/web/src/containers/exchange-rate-graph-container/ExchangeRateGraphContainer.tsx @@ -0,0 +1,46 @@ +import ExchangeRateGraph from "@components/pool/exchange-rate-graph/ExchangeRateGraph"; +import { useGnoswapContext } from "@hooks/common/use-gnoswap-context"; +import { TokenExchangeRateGraphResponse } from "@repositories/token/response/token-exchange-rate-response"; +import { useQuery } from "@tanstack/react-query"; + +const ExchangeRateGraphContainer: React.FC = () => { + const { tokenRepository } = useGnoswapContext(); + + const { data: exchangeRateGraphData } = useQuery({ + queryKey: ["exchange-rate-"], + queryFn: tokenRepository.getExchangeRateGraph, + }); + + return (); +}; + +export default ExchangeRateGraphContainer; \ No newline at end of file diff --git a/packages/web/src/containers/tvl-chart-container/TvlChartContainer.tsx b/packages/web/src/containers/tvl-chart-container/TvlChartContainer.tsx index f02f2aef1..2667d9aba 100644 --- a/packages/web/src/containers/tvl-chart-container/TvlChartContainer.tsx +++ b/packages/web/src/containers/tvl-chart-container/TvlChartContainer.tsx @@ -174,10 +174,10 @@ const TvlChartContainer: React.FC = () => { switch (tvlChartType) { case "30D": - chartData = tvlData?.last1m; + chartData = tvlData?.last30d; break; case "90D": - chartData = tvlData?.last1y; + chartData = tvlData?.last90d; break; case "ALL": chartData = tvlData?.all; @@ -206,6 +206,7 @@ const TvlChartContainer: React.FC = () => { }, { xAxisLabels: [], datas: [] } as TvlChartInfo, ); + }, [tvlChartType, tvlData]); return ( @@ -215,7 +216,7 @@ const TvlChartContainer: React.FC = () => { tvlPriceInfo={{ amount: tvlData?.latest ? `$${removeTrailingZeros(prettyNumber(tvlData?.latest))}` : "-", }} - tvlChartInfo={chartData} + tvlChartInfo={chartData ?? { xAxisLabels: [], datas: [] }} loading={isLoading || isLoadingCommon} /> ); diff --git a/packages/web/src/layouts/earn-add-layout/EarnAddLayout.styles.ts b/packages/web/src/layouts/earn-add-layout/EarnAddLayout.styles.ts index 9c13e723a..361121a99 100644 --- a/packages/web/src/layouts/earn-add-layout/EarnAddLayout.styles.ts +++ b/packages/web/src/layouts/earn-add-layout/EarnAddLayout.styles.ts @@ -33,12 +33,18 @@ export const wrapper = (theme: Theme) => css` } } + .additional-info-section { + padding: 0 24px 0 16px; + } + .add-liquidity-section { margin: 0 auto; height: 100%; } .one-click-staking { - padding: 0 24px 0 16px; + &.margin-bottom { + margin-bottom: 16px; + } .fake-div { } } @@ -62,11 +68,20 @@ export const wrapper = (theme: Theme) => css` ${fonts.h4}; } } + .additional-info-section { + width: 100%; + margin: auto; + padding: 0; + } + .exchange-rate-graph { + margin: auto; + max-width: 500px; + width: 100%; + } .add-liquidity-section { margin: auto; } .one-click-staking { - padding: 0; margin: 16px auto 0; width: 100%; max-width: 500px; @@ -97,6 +112,7 @@ export const wrapper = (theme: Theme) => css` .add-liquidity-section { margin: none; } + } ${media.mobile} { .content-wrap { diff --git a/packages/web/src/layouts/earn-add-layout/EarnAddLayout.tsx b/packages/web/src/layouts/earn-add-layout/EarnAddLayout.tsx index 8cc37c839..b86aa0425 100644 --- a/packages/web/src/layouts/earn-add-layout/EarnAddLayout.tsx +++ b/packages/web/src/layouts/earn-add-layout/EarnAddLayout.tsx @@ -6,6 +6,7 @@ interface EarnAddLayoutProps { breadcrumbs: React.ReactNode; addLiquidity: React.ReactNode; oneStaking: React.ReactNode; + exchangeRateGraph: React.ReactNode; footer: React.ReactNode; } @@ -15,6 +16,7 @@ const EarnAddLayout: React.FC = ({ addLiquidity, oneStaking, footer, + exchangeRateGraph, }) => { return (
@@ -24,9 +26,12 @@ const EarnAddLayout: React.FC = ({

Earn

{breadcrumbs}
-
+
{addLiquidity}
-
{oneStaking ? oneStaking :
}
+
+
{oneStaking ? oneStaking :
}
+
{exchangeRateGraph}
+
{footer} diff --git a/packages/web/src/layouts/pool-add-layout/PoolAddLayout.tsx b/packages/web/src/layouts/pool-add-layout/PoolAddLayout.tsx index 5e3a0e108..1bd1d0100 100644 --- a/packages/web/src/layouts/pool-add-layout/PoolAddLayout.tsx +++ b/packages/web/src/layouts/pool-add-layout/PoolAddLayout.tsx @@ -6,6 +6,7 @@ interface PoolAddLayoutProps { breadcrumbs: React.ReactNode; addLiquidity: React.ReactNode; oneStaking: React.ReactNode; + exchangeRateGraph: React.ReactNode; footer: React.ReactNode; } diff --git a/packages/web/src/pages/earn/add.tsx b/packages/web/src/pages/earn/add.tsx index 5d8160042..65912a87d 100644 --- a/packages/web/src/pages/earn/add.tsx +++ b/packages/web/src/pages/earn/add.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useMemo } from "react"; import HeaderContainer from "@containers/header-container/HeaderContainer"; import Footer from "@components/common/footer/Footer"; import EarnAddLayout from "@layouts/earn-add-layout/EarnAddLayout"; @@ -7,20 +7,27 @@ import EarnAddLiquidityContainer from "@containers/earn-add-liquidity-container/ import OneClickStakingContainer from "@containers/one-click-staking-container/OneClickStakingContainer"; import { useAtom } from "jotai"; import { EarnState } from "@states/index"; +import ExchangeRateGraphContainer from "@containers/exchange-rate-graph-container/ExchangeRateGraphContainer"; +import { useRouter } from "next/router"; export default function EarnAdd() { + const router = useRouter(); + const query = router.query; const [isEarnAdd] = useAtom(EarnState.isOneClick); const listBreadcrumb = [ { title: "Earn", path: "/earn" }, { title: "Add Position", path: "" }, ]; + const showExchangeRate = useMemo(() => query.tokenA && query.tokenB, [query.tokenA, query.tokenB]); + return ( } breadcrumbs={} addLiquidity={} oneStaking={isEarnAdd ? : null} + exchangeRateGraph={showExchangeRate ? : null} footer={
} /> ); diff --git a/packages/web/src/pages/earn/pool/[pool-path]/add.tsx b/packages/web/src/pages/earn/pool/[pool-path]/add.tsx index 7921fc21c..589552dd1 100644 --- a/packages/web/src/pages/earn/pool/[pool-path]/add.tsx +++ b/packages/web/src/pages/earn/pool/[pool-path]/add.tsx @@ -34,13 +34,14 @@ export default function EarnAdd() { { title: "Add Position", path: "" }, ]; }, [data, width]); - + return ( } - breadcrumbs={} + breadcrumbs={} addLiquidity={} oneStaking={} + exchangeRateGraph={null} footer={
} /> ); diff --git a/packages/web/src/repositories/dashboard/dashboard-repository-impl.ts b/packages/web/src/repositories/dashboard/dashboard-repository-impl.ts index e659f1107..01df2aa8b 100644 --- a/packages/web/src/repositories/dashboard/dashboard-repository-impl.ts +++ b/packages/web/src/repositories/dashboard/dashboard-repository-impl.ts @@ -24,6 +24,7 @@ export class DashboardRepositoryImpl implements DashboardRepository { const { data } = await this.networkClient.get<{ data: TvlResponse}>({ url: "/dashboard/tvl", }); + return data.data; }; public getDashboardVolume = async (): Promise => { diff --git a/packages/web/src/repositories/dashboard/res.ts b/packages/web/src/repositories/dashboard/res.ts new file mode 100644 index 000000000..f8dd5adfa --- /dev/null +++ b/packages/web/src/repositories/dashboard/res.ts @@ -0,0 +1,1451 @@ +export const res = { + "latest": "816945000.000000", + "last7d": [ + { + "date": "2024-04-26 06:00:00", + "tvlUsd": "754716000.000000" + }, + { + "date": "2024-04-26 07:00:00", + "tvlUsd": "754716000.000000" + }, + { + "date": "2024-04-26 08:00:00", + "tvlUsd": "754716000.000000" + }, + { + "date": "2024-04-26 09:00:00", + "tvlUsd": "754716000.000000" + }, + { + "date": "2024-04-26 10:00:00", + "tvlUsd": "754716000.000000" + }, + { + "date": "2024-04-26 11:00:00", + "tvlUsd": "825548000.000000" + }, + { + "date": "2024-04-26 12:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-26 13:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-26 14:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-26 15:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-26 16:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-26 17:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-26 18:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-26 19:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-26 20:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-26 21:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-26 22:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-26 23:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-27 00:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-27 01:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-27 02:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-27 03:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-27 04:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-27 05:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-27 06:00:00", + "tvlUsd": "839714000.000000" + }, + { + "date": "2024-04-27 07:00:00", + "tvlUsd": "831814000.000000" + }, + { + "date": "2024-04-27 08:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 09:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 10:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 11:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 12:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 13:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 14:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 15:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 16:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 17:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 18:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 19:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 20:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 21:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 22:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-27 23:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 00:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 01:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 02:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 03:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 04:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 05:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 06:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 07:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 08:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 09:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 10:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 11:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 12:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 13:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 14:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 15:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 16:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 17:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 18:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 19:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 20:00:00", + "tvlUsd": "816013000.000000" + }, + { + "date": "2024-04-28 21:00:00", + "tvlUsd": "816678000.000000" + }, + { + "date": "2024-04-28 22:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-28 23:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 00:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 01:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 02:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 03:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 04:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 05:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 06:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 07:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 08:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 09:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 10:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 11:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 12:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 13:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 14:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 15:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 16:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 17:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 18:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 19:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 20:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 21:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 22:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-29 23:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 00:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 01:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 02:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 03:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 04:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 05:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 06:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 07:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 08:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 09:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 10:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 11:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 12:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 13:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 14:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 15:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 16:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 17:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 18:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 19:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 20:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 21:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 22:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 23:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 00:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 01:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 02:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 03:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 04:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 05:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 06:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 07:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 08:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 09:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 10:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 11:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 12:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 13:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 14:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 15:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 16:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 17:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 18:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 19:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 20:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 21:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 22:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 23:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 00:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 01:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 02:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 03:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 04:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 05:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 06:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 07:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 08:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 09:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 10:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 11:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 12:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 13:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 14:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 15:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 16:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 17:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 18:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 19:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 20:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 21:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 22:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 23:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-03 00:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-03 01:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-03 02:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-03 03:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-03 04:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-03 05:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-03 06:00:00", + "tvlUsd": "816945000.000000" + } + ], + "last1m": [ + { + "date": "2024-04-03 0:00:00", + "tvlUsd": "729097000.000000" + }, + { + "date": "2024-04-04 0:00:00", + "tvlUsd": "729097000.000000" + }, + { + "date": "2024-04-05 0:00:00", + "tvlUsd": "729097000.000000" + }, + { + "date": "2024-04-06 0:00:00", + "tvlUsd": "729105000.000000" + }, + { + "date": "2024-04-07 0:00:00", + "tvlUsd": "728534000.000000" + }, + { + "date": "2024-04-08 0:00:00", + "tvlUsd": "725200000.000000" + }, + { + "date": "2024-04-09 0:00:00", + "tvlUsd": "725201000.000000" + }, + { + "date": "2024-04-10 0:00:00", + "tvlUsd": "773143000.000000" + }, + { + "date": "2024-04-11 0:00:00", + "tvlUsd": "865192000.000000" + }, + { + "date": "2024-04-12 0:00:00", + "tvlUsd": "865192000.000000" + }, + { + "date": "2024-04-13 0:00:00", + "tvlUsd": "865192000.000000" + }, + { + "date": "2024-04-14 0:00:00", + "tvlUsd": "865192000.000000" + }, + { + "date": "2024-04-15 0:00:00", + "tvlUsd": "865194000.000000" + }, + { + "date": "2024-04-16 0:00:00", + "tvlUsd": "865194000.000000" + }, + { + "date": "2024-04-17 0:00:00", + "tvlUsd": "865194000.000000" + }, + { + "date": "2024-04-18 0:00:00", + "tvlUsd": "859388000.000000" + }, + { + "date": "2024-04-19 0:00:00", + "tvlUsd": "844597000.000000" + }, + { + "date": "2024-04-20 0:00:00", + "tvlUsd": "833646000.000000" + }, + { + "date": "2024-04-21 0:00:00", + "tvlUsd": "833649000.000000" + }, + { + "date": "2024-04-22 0:00:00", + "tvlUsd": "833909000.000000" + }, + { + "date": "2024-04-23 0:00:00", + "tvlUsd": "750125000.000000" + }, + { + "date": "2024-04-24 0:00:00", + "tvlUsd": "738260000.000000" + }, + { + "date": "2024-04-25 0:00:00", + "tvlUsd": "746151000.000000" + }, + { + "date": "2024-04-26 0:00:00", + "tvlUsd": "800166000.000000" + }, + { + "date": "2024-04-27 0:00:00", + "tvlUsd": "823471000.000000" + }, + { + "date": "2024-04-28 0:00:00", + "tvlUsd": "816117000.000000" + }, + { + "date": "2024-04-29 0:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30 0:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01 0:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02 0:00:00", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-03 0:00:00", + "tvlUsd": "816945000.000000" + } + ], + "last1y": [ + { + "date": "2024-02-14T00:00:00Z", + "tvlUsd": "77803200000000000589171802505216.000000" + }, + { + "date": "2024-02-15T00:00:00Z", + "tvlUsd": "2259030000.000000" + }, + { + "date": "2024-02-16T00:00:00Z", + "tvlUsd": "2258180000.000000" + }, + { + "date": "2024-02-17T00:00:00Z", + "tvlUsd": "2257920000.000000" + }, + { + "date": "2024-02-18T00:00:00Z", + "tvlUsd": "2037330000.000000" + }, + { + "date": "2024-02-19T00:00:00Z", + "tvlUsd": "1635070000.000000" + }, + { + "date": "2024-02-20T00:00:00Z", + "tvlUsd": "1755880000.000000" + }, + { + "date": "2024-02-21T00:00:00Z", + "tvlUsd": "1761550000.000000" + }, + { + "date": "2024-02-22T00:00:00Z", + "tvlUsd": "1750670000.000000" + }, + { + "date": "2024-02-23T00:00:00Z", + "tvlUsd": "1743090000.000000" + }, + { + "date": "2024-02-24T00:00:00Z", + "tvlUsd": "1743090000.000000" + }, + { + "date": "2024-02-25T00:00:00Z", + "tvlUsd": "1743090000.000000" + }, + { + "date": "2024-02-26T00:00:00Z", + "tvlUsd": "1743090000.000000" + }, + { + "date": "2024-02-27T00:00:00Z", + "tvlUsd": "1370110000.000000" + }, + { + "date": "2024-02-28T00:00:00Z", + "tvlUsd": "1278770000.000000" + }, + { + "date": "2024-02-29T00:00:00Z", + "tvlUsd": "988077000.000000" + }, + { + "date": "2024-03-01T00:00:00Z", + "tvlUsd": "986846000.000000" + }, + { + "date": "2024-03-02T00:00:00Z", + "tvlUsd": "986847000.000000" + }, + { + "date": "2024-03-03T00:00:00Z", + "tvlUsd": "986775000.000000" + }, + { + "date": "2024-03-04T00:00:00Z", + "tvlUsd": "701146000.000000" + }, + { + "date": "2024-03-05T00:00:00Z", + "tvlUsd": "615695000.000000" + }, + { + "date": "2024-03-06T00:00:00Z", + "tvlUsd": "680737000.000000" + }, + { + "date": "2024-03-07T00:00:00Z", + "tvlUsd": "654814000.000000" + }, + { + "date": "2024-03-08T00:00:00Z", + "tvlUsd": "653970000.000000" + }, + { + "date": "2024-03-09T00:00:00Z", + "tvlUsd": "653970000.000000" + }, + { + "date": "2024-03-10T00:00:00Z", + "tvlUsd": "653970000.000000" + }, + { + "date": "2024-03-11T00:00:00Z", + "tvlUsd": "653970000.000000" + }, + { + "date": "2024-03-12T00:00:00Z", + "tvlUsd": "653984000.000000" + }, + { + "date": "2024-03-13T00:00:00Z", + "tvlUsd": "653990000.000000" + }, + { + "date": "2024-03-14T00:00:00Z", + "tvlUsd": "652488000.000000" + }, + { + "date": "2024-03-15T00:00:00Z", + "tvlUsd": "652396000.000000" + }, + { + "date": "2024-03-16T00:00:00Z", + "tvlUsd": "652397000.000000" + }, + { + "date": "2024-03-17T00:00:00Z", + "tvlUsd": "652399000.000000" + }, + { + "date": "2024-03-18T00:00:00Z", + "tvlUsd": "652458000.000000" + }, + { + "date": "2024-03-19T00:00:00Z", + "tvlUsd": "652497000.000000" + }, + { + "date": "2024-03-20T00:00:00Z", + "tvlUsd": "652497000.000000" + }, + { + "date": "2024-03-21T00:00:00Z", + "tvlUsd": "652497000.000000" + }, + { + "date": "2024-03-22T00:00:00Z", + "tvlUsd": "655230000.000000" + }, + { + "date": "2024-03-23T00:00:00Z", + "tvlUsd": "661307000.000000" + }, + { + "date": "2024-03-24T00:00:00Z", + "tvlUsd": "663822000.000000" + }, + { + "date": "2024-03-25T00:00:00Z", + "tvlUsd": "685136000.000000" + }, + { + "date": "2024-03-26T00:00:00Z", + "tvlUsd": "688812000.000000" + }, + { + "date": "2024-03-27T00:00:00Z", + "tvlUsd": "698258000.000000" + }, + { + "date": "2024-03-28T00:00:00Z", + "tvlUsd": "681830000.000000" + }, + { + "date": "2024-03-29T00:00:00Z", + "tvlUsd": "681830000.000000" + }, + { + "date": "2024-03-30T00:00:00Z", + "tvlUsd": "678274000.000000" + }, + { + "date": "2024-03-31T00:00:00Z", + "tvlUsd": "670448000.000000" + }, + { + "date": "2024-04-01T00:00:00Z", + "tvlUsd": "667435000.000000" + }, + { + "date": "2024-04-02T00:00:00Z", + "tvlUsd": "718183000.000000" + }, + { + "date": "2024-04-03T00:00:00Z", + "tvlUsd": "726869000.000000" + }, + { + "date": "2024-04-04T00:00:00Z", + "tvlUsd": "729097000.000000" + }, + { + "date": "2024-04-05T00:00:00Z", + "tvlUsd": "729097000.000000" + }, + { + "date": "2024-04-06T00:00:00Z", + "tvlUsd": "729105000.000000" + }, + { + "date": "2024-04-07T00:00:00Z", + "tvlUsd": "728534000.000000" + }, + { + "date": "2024-04-08T00:00:00Z", + "tvlUsd": "725200000.000000" + }, + { + "date": "2024-04-09T00:00:00Z", + "tvlUsd": "725201000.000000" + }, + { + "date": "2024-04-10T00:00:00Z", + "tvlUsd": "773143000.000000" + }, + { + "date": "2024-04-11T00:00:00Z", + "tvlUsd": "865192000.000000" + }, + { + "date": "2024-04-12T00:00:00Z", + "tvlUsd": "865192000.000000" + }, + { + "date": "2024-04-13T00:00:00Z", + "tvlUsd": "865192000.000000" + }, + { + "date": "2024-04-14T00:00:00Z", + "tvlUsd": "865192000.000000" + }, + { + "date": "2024-04-15T00:00:00Z", + "tvlUsd": "865194000.000000" + }, + { + "date": "2024-04-16T00:00:00Z", + "tvlUsd": "865194000.000000" + }, + { + "date": "2024-04-17T00:00:00Z", + "tvlUsd": "865194000.000000" + }, + { + "date": "2024-04-18T00:00:00Z", + "tvlUsd": "859388000.000000" + }, + { + "date": "2024-04-19T00:00:00Z", + "tvlUsd": "844597000.000000" + }, + { + "date": "2024-04-20T00:00:00Z", + "tvlUsd": "833646000.000000" + }, + { + "date": "2024-04-21T00:00:00Z", + "tvlUsd": "833649000.000000" + }, + { + "date": "2024-04-22T00:00:00Z", + "tvlUsd": "833909000.000000" + }, + { + "date": "2024-04-23T00:00:00Z", + "tvlUsd": "750125000.000000" + }, + { + "date": "2024-04-24T00:00:00Z", + "tvlUsd": "738260000.000000" + }, + { + "date": "2024-04-25T00:00:00Z", + "tvlUsd": "746151000.000000" + }, + { + "date": "2024-04-26T00:00:00Z", + "tvlUsd": "800166000.000000" + }, + { + "date": "2024-04-27T00:00:00Z", + "tvlUsd": "823471000.000000" + }, + { + "date": "2024-04-28T00:00:00Z", + "tvlUsd": "816117000.000000" + }, + { + "date": "2024-04-29T00:00:00Z", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30T00:00:00Z", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01T00:00:00Z", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02T00:00:00Z", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-03T00:00:00Z", + "tvlUsd": "816945000.000000" + } + ], + "all": [ + { + "date": "2024-02-14T00:00:00Z", + "tvlUsd": "77803200000000000589171802505216.000000" + }, + { + "date": "2024-02-15T00:00:00Z", + "tvlUsd": "2259030000.000000" + }, + { + "date": "2024-02-16T00:00:00Z", + "tvlUsd": "2258180000.000000" + }, + { + "date": "2024-02-17T00:00:00Z", + "tvlUsd": "2257920000.000000" + }, + { + "date": "2024-02-18T00:00:00Z", + "tvlUsd": "2037330000.000000" + }, + { + "date": "2024-02-19T00:00:00Z", + "tvlUsd": "1635070000.000000" + }, + { + "date": "2024-02-20T00:00:00Z", + "tvlUsd": "1755880000.000000" + }, + { + "date": "2024-02-21T00:00:00Z", + "tvlUsd": "1761550000.000000" + }, + { + "date": "2024-02-22T00:00:00Z", + "tvlUsd": "1750670000.000000" + }, + { + "date": "2024-02-23T00:00:00Z", + "tvlUsd": "1743090000.000000" + }, + { + "date": "2024-02-24T00:00:00Z", + "tvlUsd": "1743090000.000000" + }, + { + "date": "2024-02-25T00:00:00Z", + "tvlUsd": "1743090000.000000" + }, + { + "date": "2024-02-26T00:00:00Z", + "tvlUsd": "1743090000.000000" + }, + { + "date": "2024-02-27T00:00:00Z", + "tvlUsd": "1370110000.000000" + }, + { + "date": "2024-02-28T00:00:00Z", + "tvlUsd": "1278770000.000000" + }, + { + "date": "2024-02-29T00:00:00Z", + "tvlUsd": "988077000.000000" + }, + { + "date": "2024-03-01T00:00:00Z", + "tvlUsd": "986846000.000000" + }, + { + "date": "2024-03-02T00:00:00Z", + "tvlUsd": "986847000.000000" + }, + { + "date": "2024-03-03T00:00:00Z", + "tvlUsd": "986775000.000000" + }, + { + "date": "2024-03-04T00:00:00Z", + "tvlUsd": "701146000.000000" + }, + { + "date": "2024-03-05T00:00:00Z", + "tvlUsd": "615695000.000000" + }, + { + "date": "2024-03-06T00:00:00Z", + "tvlUsd": "680737000.000000" + }, + { + "date": "2024-03-07T00:00:00Z", + "tvlUsd": "654814000.000000" + }, + { + "date": "2024-03-08T00:00:00Z", + "tvlUsd": "653970000.000000" + }, + { + "date": "2024-03-09T00:00:00Z", + "tvlUsd": "653970000.000000" + }, + { + "date": "2024-03-10T00:00:00Z", + "tvlUsd": "653970000.000000" + }, + { + "date": "2024-03-11T00:00:00Z", + "tvlUsd": "653970000.000000" + }, + { + "date": "2024-03-12T00:00:00Z", + "tvlUsd": "653984000.000000" + }, + { + "date": "2024-03-13T00:00:00Z", + "tvlUsd": "653990000.000000" + }, + { + "date": "2024-03-14T00:00:00Z", + "tvlUsd": "652488000.000000" + }, + { + "date": "2024-03-15T00:00:00Z", + "tvlUsd": "652396000.000000" + }, + { + "date": "2024-03-16T00:00:00Z", + "tvlUsd": "652397000.000000" + }, + { + "date": "2024-03-17T00:00:00Z", + "tvlUsd": "652399000.000000" + }, + { + "date": "2024-03-18T00:00:00Z", + "tvlUsd": "652458000.000000" + }, + { + "date": "2024-03-19T00:00:00Z", + "tvlUsd": "652497000.000000" + }, + { + "date": "2024-03-20T00:00:00Z", + "tvlUsd": "652497000.000000" + }, + { + "date": "2024-03-21T00:00:00Z", + "tvlUsd": "652497000.000000" + }, + { + "date": "2024-03-22T00:00:00Z", + "tvlUsd": "655230000.000000" + }, + { + "date": "2024-03-23T00:00:00Z", + "tvlUsd": "661307000.000000" + }, + { + "date": "2024-03-24T00:00:00Z", + "tvlUsd": "663822000.000000" + }, + { + "date": "2024-03-25T00:00:00Z", + "tvlUsd": "685136000.000000" + }, + { + "date": "2024-03-26T00:00:00Z", + "tvlUsd": "688812000.000000" + }, + { + "date": "2024-03-27T00:00:00Z", + "tvlUsd": "698258000.000000" + }, + { + "date": "2024-03-28T00:00:00Z", + "tvlUsd": "681830000.000000" + }, + { + "date": "2024-03-29T00:00:00Z", + "tvlUsd": "681830000.000000" + }, + { + "date": "2024-03-30T00:00:00Z", + "tvlUsd": "678274000.000000" + }, + { + "date": "2024-03-31T00:00:00Z", + "tvlUsd": "670448000.000000" + }, + { + "date": "2024-04-01T00:00:00Z", + "tvlUsd": "667435000.000000" + }, + { + "date": "2024-04-02T00:00:00Z", + "tvlUsd": "718183000.000000" + }, + { + "date": "2024-04-03T00:00:00Z", + "tvlUsd": "726869000.000000" + }, + { + "date": "2024-04-04T00:00:00Z", + "tvlUsd": "729097000.000000" + }, + { + "date": "2024-04-05T00:00:00Z", + "tvlUsd": "729097000.000000" + }, + { + "date": "2024-04-06T00:00:00Z", + "tvlUsd": "729105000.000000" + }, + { + "date": "2024-04-07T00:00:00Z", + "tvlUsd": "728534000.000000" + }, + { + "date": "2024-04-08T00:00:00Z", + "tvlUsd": "725200000.000000" + }, + { + "date": "2024-04-09T00:00:00Z", + "tvlUsd": "725201000.000000" + }, + { + "date": "2024-04-10T00:00:00Z", + "tvlUsd": "773143000.000000" + }, + { + "date": "2024-04-11T00:00:00Z", + "tvlUsd": "865192000.000000" + }, + { + "date": "2024-04-12T00:00:00Z", + "tvlUsd": "865192000.000000" + }, + { + "date": "2024-04-13T00:00:00Z", + "tvlUsd": "865192000.000000" + }, + { + "date": "2024-04-14T00:00:00Z", + "tvlUsd": "865192000.000000" + }, + { + "date": "2024-04-15T00:00:00Z", + "tvlUsd": "865194000.000000" + }, + { + "date": "2024-04-16T00:00:00Z", + "tvlUsd": "865194000.000000" + }, + { + "date": "2024-04-17T00:00:00Z", + "tvlUsd": "865194000.000000" + }, + { + "date": "2024-04-18T00:00:00Z", + "tvlUsd": "859388000.000000" + }, + { + "date": "2024-04-19T00:00:00Z", + "tvlUsd": "844597000.000000" + }, + { + "date": "2024-04-20T00:00:00Z", + "tvlUsd": "833646000.000000" + }, + { + "date": "2024-04-21T00:00:00Z", + "tvlUsd": "833649000.000000" + }, + { + "date": "2024-04-22T00:00:00Z", + "tvlUsd": "833909000.000000" + }, + { + "date": "2024-04-23T00:00:00Z", + "tvlUsd": "750125000.000000" + }, + { + "date": "2024-04-24T00:00:00Z", + "tvlUsd": "738260000.000000" + }, + { + "date": "2024-04-25T00:00:00Z", + "tvlUsd": "746151000.000000" + }, + { + "date": "2024-04-26T00:00:00Z", + "tvlUsd": "800166000.000000" + }, + { + "date": "2024-04-27T00:00:00Z", + "tvlUsd": "823471000.000000" + }, + { + "date": "2024-04-28T00:00:00Z", + "tvlUsd": "816117000.000000" + }, + { + "date": "2024-04-29T00:00:00Z", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-04-30T00:00:00Z", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-01T00:00:00Z", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-02T00:00:00Z", + "tvlUsd": "816945000.000000" + }, + { + "date": "2024-05-03T00:00:00Z", + "tvlUsd": "816945000.000000" + } + ] +}; \ No newline at end of file diff --git a/packages/web/src/repositories/dashboard/response/tvl-response.ts b/packages/web/src/repositories/dashboard/response/tvl-response.ts index d63a4294b..78defd985 100644 --- a/packages/web/src/repositories/dashboard/response/tvl-response.ts +++ b/packages/web/src/repositories/dashboard/response/tvl-response.ts @@ -1,8 +1,8 @@ export interface TvlResponse { latest: string; last7d: TvlData[]; - last1m: TvlData[]; - last1y: TvlData[]; + last30d: TvlData[]; + last90d: TvlData[]; all: TvlData[]; } diff --git a/packages/web/src/repositories/token/mock/token-exchange-rate-graph.json b/packages/web/src/repositories/token/mock/token-exchange-rate-graph.json new file mode 100644 index 000000000..90722bb98 --- /dev/null +++ b/packages/web/src/repositories/token/mock/token-exchange-rate-graph.json @@ -0,0 +1,845 @@ +{ + "latest": "1.74741", + "last7d": [ + { + "time": "2024-05-03T19:02:12Z", + "value": 1.10967 + }, + { + "time": "2024-05-01T21:43:53Z", + "value": 1.17824 + }, + { + "time": "2024-04-30T00:42:41Z", + "value": 1.31013 + }, + { + "time": "2024-05-02T08:45:04Z", + "value": 1.13766 + }, + { + "time": "2024-04-28T18:54:53Z", + "value": 1.24591 + }, + { + "time": "2024-04-30T12:45:02Z", + "value": 1.31181 + }, + { + "time": "2024-05-02T06:48:10Z", + "value": 1.36767 + }, + { + "time": "2024-04-30T21:24:06Z", + "value": 1.18098 + }, + { + "time": "2024-04-28T10:20:08Z", + "value": 1.10597 + }, + { + "time": "2024-05-02T10:26:14Z", + "value": 1.38811 + }, + { + "time": "2024-04-28T02:45:32Z", + "value": 1.48304 + }, + { + "time": "2024-04-29T18:39:10Z", + "value": 1.29945 + }, + { + "time": "2024-04-28T15:51:30Z", + "value": 1.17537 + }, + { + "time": "2024-04-28T04:43:37Z", + "value": 1.42363 + }, + { + "time": "2024-05-01T17:24:25Z", + "value": 1.39945 + }, + { + "time": "2024-05-02T19:08:46Z", + "value": 1.21892 + }, + { + "time": "2024-05-01T06:02:39Z", + "value": 1.40287 + }, + { + "time": "2024-05-03T18:27:44Z", + "value": 1.00492 + }, + { + "time": "2024-05-02T15:41:36Z", + "value": 1.25744 + }, + { + "time": "2024-04-30T04:41:04Z", + "value": 1.035 + }, + { + "time": "2024-04-29T04:15:24Z", + "value": 1.15412 + }, + { + "time": "2024-04-29T02:00:32Z", + "value": 1.02488 + }, + { + "time": "2024-05-02T22:50:03Z", + "value": 1.49073 + }, + { + "time": "2024-04-29T15:06:24Z", + "value": 1.39002 + }, + { + "time": "2024-04-28T20:47:53Z", + "value": 1.16994 + }, + { + "time": "2024-05-02T14:18:08Z", + "value": 1.17604 + }, + { + "time": "2024-05-01T18:41:48Z", + "value": 1.4254 + }, + { + "time": "2024-04-29T01:53:04Z", + "value": 1.38219 + }, + { + "time": "2024-04-29T16:42:02Z", + "value": 1.14416 + }, + { + "time": "2024-05-02T00:18:39Z", + "value": 1.44241 + }, + { + "time": "2024-05-03T16:05:07Z", + "value": 1.44397 + }, + { + "time": "2024-05-01T22:04:32Z", + "value": 1.16282 + }, + { + "time": "2024-04-30T04:14:30Z", + "value": 1.05989 + }, + { + "time": "2024-04-28T19:26:39Z", + "value": 1.43877 + }, + { + "time": "2024-05-03T12:17:06Z", + "value": 1.14217 + }, + { + "time": "2024-05-02T18:51:13Z", + "value": 1.44852 + }, + { + "time": "2024-05-03T18:53:37Z", + "value": 1.43345 + }, + { + "time": "2024-04-28T14:16:22Z", + "value": 1.29819 + }, + { + "time": "2024-05-03T18:34:46Z", + "value": 1.05969 + }, + { + "time": "2024-04-29T13:51:23Z", + "value": 1.40333 + }, + { + "time": "2024-05-01T20:25:10Z", + "value": 1.31209 + }, + { + "time": "2024-05-01T09:18:11Z", + "value": 1.11356 + }, + { + "time": "2024-04-30T14:47:24Z", + "value": 1.05529 + }, + { + "time": "2024-05-02T15:38:27Z", + "value": 1.13321 + }, + { + "time": "2024-04-28T23:56:09Z", + "value": 1.42782 + }, + { + "time": "2024-05-01T02:24:23Z", + "value": 1.32316 + }, + { + "time": "2024-05-03T20:37:55Z", + "value": 1.17752 + }, + { + "time": "2024-05-01T10:54:38Z", + "value": 1.23272 + }, + { + "time": "2024-04-28T12:52:45Z", + "value": 1.43618 + }, + { + "time": "2024-04-28T12:47:50Z", + "value": 1.411 + }, + { + "time": "2024-04-30T22:28:18Z", + "value": 1.01571 + }, + { + "time": "2024-05-01T18:16:17Z", + "value": 1.48307 + }, + { + "time": "2024-05-01T11:32:23Z", + "value": 1.23109 + }, + { + "time": "2024-04-29T12:25:16Z", + "value": 1.28538 + }, + { + "time": "2024-05-02T18:52:12Z", + "value": 1.18625 + }, + { + "time": "2024-05-01T10:34:03Z", + "value": 1.30151 + }, + { + "time": "2024-05-02T20:49:54Z", + "value": 1.43542 + }, + { + "time": "2024-05-01T19:00:41Z", + "value": 1.06729 + }, + { + "time": "2024-04-30T20:57:29Z", + "value": 1.26281 + }, + { + "time": "2024-05-03T12:08:10Z", + "value": 1.12311 + }, + { + "time": "2024-05-02T17:01:39Z", + "value": 1.27951 + }, + { + "time": "2024-04-28T13:25:58Z", + "value": 1.0161 + }, + { + "time": "2024-04-30T03:48:58Z", + "value": 1.01245 + }, + { + "time": "2024-04-30T01:08:46Z", + "value": 1.09728 + }, + { + "time": "2024-05-01T02:01:41Z", + "value": 1.48663 + }, + { + "time": "2024-05-03T18:02:58Z", + "value": 1.25903 + }, + { + "time": "2024-05-01T03:26:28Z", + "value": 1.1856 + }, + { + "time": "2024-04-30T22:35:41Z", + "value": 1.32971 + }, + { + "time": "2024-04-29T16:48:11Z", + "value": 1.19684 + }, + { + "time": "2024-04-28T03:52:56Z", + "value": 1.48324 + }, + { + "time": "2024-04-28T21:10:15Z", + "value": 1.14138 + }, + { + "time": "2024-04-30T16:50:30Z", + "value": 1.46617 + }, + { + "time": "2024-04-29T08:41:11Z", + "value": 1.0373 + }, + { + "time": "2024-04-30T16:18:02Z", + "value": 1.09033 + }, + { + "time": "2024-04-30T18:46:54Z", + "value": 1.38535 + }, + { + "time": "2024-04-30T20:37:19Z", + "value": 1.3404 + }, + { + "time": "2024-04-29T13:55:26Z", + "value": 1.15208 + }, + { + "time": "2024-04-30T03:57:23Z", + "value": 1.48685 + }, + { + "time": "2024-04-29T17:24:58Z", + "value": 1.23036 + }, + { + "time": "2024-04-28T15:44:34Z", + "value": 1.42133 + }, + { + "time": "2024-04-28T08:44:12Z", + "value": 1.00115 + }, + { + "time": "2024-04-29T08:31:49Z", + "value": 1.45581 + }, + { + "time": "2024-05-01T21:15:32Z", + "value": 1.18738 + }, + { + "time": "2024-05-02T18:50:19Z", + "value": 1.27859 + }, + { + "time": "2024-05-01T03:19:02Z", + "value": 1.00761 + }, + { + "time": "2024-05-03T14:24:37Z", + "value": 1.13962 + }, + { + "time": "2024-05-03T21:18:10Z", + "value": 1.31715 + }, + { + "time": "2024-04-28T07:25:58Z", + "value": 1.26419 + }, + { + "time": "2024-04-29T09:01:26Z", + "value": 1.34296 + }, + { + "time": "2024-04-28T12:10:44Z", + "value": 1.40669 + }, + { + "time": "2024-05-01T20:03:58Z", + "value": 1.21822 + }, + { + "time": "2024-04-28T08:57:14Z", + "value": 1.07455 + }, + { + "time": "2024-04-28T07:48:12Z", + "value": 1.20981 + }, + { + "time": "2024-05-03T04:26:54Z", + "value": 1.08584 + }, + { + "time": "2024-05-02T20:10:09Z", + "value": 1.03304 + }, + { + "time": "2024-04-30T06:18:15Z", + "value": 1.07874 + }, + { + "time": "2024-05-01T06:25:59Z", + "value": 1.15407 + }, + { + "time": "2024-04-29T21:24:27Z", + "value": 1.4963 + }, + { + "time": "2024-05-02T01:56:46Z", + "value": 1.45216 + }, + { + "time": "2024-04-29T17:39:28Z", + "value": 1.35955 + } + ], + "last1m": [ + { + "time": "2023-06-11T06:21:10Z", + "value": 1.63542 + }, + { + "time": "2023-04-06T03:36:48Z", + "value": 1.32446 + }, + { + "time": "2023-11-27T23:12:50Z", + "value": 1.81622 + }, + { + "time": "2023-04-27T16:05:49Z", + "value": 1.3209 + }, + { + "time": "2024-02-15T04:30:27Z", + "value": 1.72458 + }, + { + "time": "2023-07-31T04:45:43Z", + "value": 1.10659 + }, + { + "time": "2023-06-22T12:01:41Z", + "value": 1.14059 + }, + { + "time": "2023-11-20T02:57:46Z", + "value": 1.46792 + }, + { + "time": "2023-08-07T02:07:16Z", + "value": 1.16288 + }, + { + "time": "2023-08-06T02:41:12Z", + "value": 1.85584 + }, + { + "time": "2023-07-21T23:10:42Z", + "value": 1.23244 + }, + { + "time": "2023-11-12T17:46:47Z", + "value": 1.72923 + }, + { + "time": "2024-02-27T19:03:49Z", + "value": 1.53823 + }, + { + "time": "2023-12-14T13:54:11Z", + "value": 1.37528 + }, + { + "time": "2024-02-06T05:48:35Z", + "value": 1.29488 + }, + { + "time": "2023-10-19T00:13:24Z", + "value": 1.7638 + }, + { + "time": "2023-11-22T03:53:16Z", + "value": 1.86653 + }, + { + "time": "2023-05-27T02:45:27Z", + "value": 1.89716 + }, + { + "time": "2023-10-03T08:57:47Z", + "value": 1.53181 + }, + { + "time": "2023-07-19T16:54:18Z", + "value": 1.27779 + }, + { + "time": "2023-08-13T17:49:15Z", + "value": 1.02008 + }, + { + "time": "2023-09-01T14:42:14Z", + "value": 1.96909 + }, + { + "time": "2023-11-25T11:48:50Z", + "value": 1.54525 + }, + { + "time": "2024-03-05T02:34:31Z", + "value": 1.53768 + }, + { + "time": "2023-12-02T04:55:20Z", + "value": 1.03521 + }, + { + "time": "2024-01-18T23:43:45Z", + "value": 1.47198 + }, + { + "time": "2023-12-16T02:19:36Z", + "value": 1.8971 + }, + { + "time": "2023-11-24T11:34:19Z", + "value": 1.01447 + }, + { + "time": "2023-05-07T15:06:55Z", + "value": 1.8035 + }, + { + "time": "2024-01-18T06:26:38Z", + "value": 1.47135 + } + ], + "all": [ + { + "time": "2023-06-24T11:41:52Z", + "value": 1.46699 + }, + { + "time": "2023-10-13T21:35:54Z", + "value": 1.72245 + }, + { + "time": "2023-09-16T18:41:39Z", + "value": 1.74061 + }, + { + "time": "2023-10-09T19:06:17Z", + "value": 1.92297 + }, + { + "time": "2023-09-23T07:08:21Z", + "value": 1.5477 + }, + { + "time": "2023-08-13T13:04:26Z", + "value": 1.1617 + }, + { + "time": "2023-10-03T21:16:17Z", + "value": 1.60104 + }, + { + "time": "2024-04-03T15:17:11Z", + "value": 1.88893 + }, + { + "time": "2023-07-03T05:08:52Z", + "value": 1.07822 + }, + { + "time": "2023-12-20T07:46:17Z", + "value": 1.23986 + }, + { + "time": "2024-01-30T02:19:04Z", + "value": 1.29151 + }, + { + "time": "2023-10-07T06:26:25Z", + "value": 1.53962 + }, + { + "time": "2024-02-03T06:52:40Z", + "value": 1.96686 + }, + { + "time": "2023-07-31T02:21:39Z", + "value": 1.66876 + }, + { + "time": "2023-05-13T21:27:41Z", + "value": 1.85242 + }, + { + "time": "2024-03-07T19:18:23Z", + "value": 1.71079 + }, + { + "time": "2024-02-21T13:40:00Z", + "value": 1.27615 + }, + { + "time": "2024-04-07T18:34:34Z", + "value": 1.32703 + }, + { + "time": "2023-02-16T11:14:22Z", + "value": 1.25862 + }, + { + "time": "2024-01-26T11:23:41Z", + "value": 1.14107 + }, + { + "time": "2023-07-30T03:09:49Z", + "value": 1.0139 + }, + { + "time": "2023-07-01T23:31:41Z", + "value": 1.13136 + }, + { + "time": "2023-10-31T15:50:14Z", + "value": 1.90345 + }, + { + "time": "2023-02-25T17:57:27Z", + "value": 1.06706 + }, + { + "time": "2023-12-30T00:07:37Z", + "value": 1.26728 + }, + { + "time": "2024-03-25T17:10:12Z", + "value": 1.3376 + }, + { + "time": "2023-03-15T15:24:31Z", + "value": 1.81936 + }, + { + "time": "2023-05-12T02:18:40Z", + "value": 1.26871 + }, + { + "time": "2023-03-17T21:07:47Z", + "value": 1.09656 + }, + { + "time": "2023-03-07T00:13:56Z", + "value": 1.00976 + }, + { + "time": "2024-02-03T12:43:48Z", + "value": 1.56205 + }, + { + "time": "2023-05-31T23:09:48Z", + "value": 1.66898 + }, + { + "time": "2024-04-12T09:41:20Z", + "value": 1.33782 + }, + { + "time": "2024-04-19T22:44:41Z", + "value": 1.41365 + }, + { + "time": "2023-02-23T21:25:02Z", + "value": 1.5083 + }, + { + "time": "2023-02-20T05:47:53Z", + "value": 1.19402 + }, + { + "time": "2024-03-31T04:18:50Z", + "value": 1.83342 + }, + { + "time": "2024-03-09T18:30:31Z", + "value": 1.94061 + }, + { + "time": "2023-06-20T12:22:22Z", + "value": 1.46016 + }, + { + "time": "2023-02-10T11:31:01Z", + "value": 1.38074 + }, + { + "time": "2023-01-31T13:02:33Z", + "value": 1.73842 + }, + { + "time": "2023-10-13T08:08:59Z", + "value": 1.68872 + }, + { + "time": "2023-10-21T10:33:52Z", + "value": 1.61957 + }, + { + "time": "2023-02-10T07:40:34Z", + "value": 1.28195 + }, + { + "time": "2023-10-29T17:20:54Z", + "value": 1.68456 + }, + { + "time": "2023-09-16T04:11:08Z", + "value": 1.90716 + }, + { + "time": "2023-02-12T03:51:41Z", + "value": 1.72939 + }, + { + "time": "2024-04-06T22:26:40Z", + "value": 1.67333 + }, + { + "time": "2023-03-08T12:30:42Z", + "value": 1.12171 + }, + { + "time": "2023-02-20T13:16:23Z", + "value": 1.15626 + }, + { + "time": "2023-10-21T21:08:02Z", + "value": 1.07094 + }, + { + "time": "2023-05-13T13:58:38Z", + "value": 1.18066 + }, + { + "time": "2024-02-01T19:52:27Z", + "value": 1.95718 + }, + { + "time": "2023-12-25T04:45:17Z", + "value": 1.21269 + }, + { + "time": "2023-01-28T19:45:09Z", + "value": 1.29056 + }, + { + "time": "2023-12-25T12:36:34Z", + "value": 1.79353 + }, + { + "time": "2023-10-27T19:59:52Z", + "value": 1.5029 + }, + { + "time": "2023-04-04T18:08:23Z", + "value": 1.68118 + }, + { + "time": "2023-01-12T04:07:52Z", + "value": 1.00686 + }, + { + "time": "2024-04-07T19:11:33Z", + "value": 1.06775 + }, + { + "time": "2023-06-29T12:19:45Z", + "value": 1.97079 + }, + { + "time": "2024-02-16T20:46:42Z", + "value": 1.30844 + }, + { + "time": "2023-01-13T01:56:13Z", + "value": 1.4909 + }, + { + "time": "2023-11-03T10:57:33Z", + "value": 1.56496 + }, + { + "time": "2024-04-12T04:46:37Z", + "value": 1.43928 + }, + { + "time": "2023-03-28T23:30:16Z", + "value": 1.01067 + }, + { + "time": "2024-01-25T23:14:35Z", + "value": 1.13533 + }, + { + "time": "2023-12-07T15:31:07Z", + "value": 1.90591 + }, + { + "time": "2024-02-14T12:27:58Z", + "value": 1.12329 + }, + { + "time": "2023-06-30T16:01:33Z", + "value": 1.47425 + }, + { + "time": "2023-09-02T03:16:00Z", + "value": 1.43576 + }, + { + "time": "2023-06-12T00:05:07Z", + "value": 1.25115 + }, + { + "time": "2023-12-22T22:04:53Z", + "value": 1.65433 + }, + { + "time": "2023-08-25T09:22:39Z", + "value": 1.94721 + }, + { + "time": "2024-02-28T17:06:03Z", + "value": 1.74517 + }, + { + "time": "2023-05-10T03:31:37Z", + "value": 1.14655 + }, + { + "time": "2023-08-15T04:45:15Z", + "value": 1.03257 + }, + { + "time": "2023-12-02T04:58:01Z", + "value": 1.6609 + }, + { + "time": "2023-04-13T10:41:23Z", + "value": 1.74741 + } + ] +} \ No newline at end of file diff --git a/packages/web/src/repositories/token/response/token-exchange-rate-response.ts b/packages/web/src/repositories/token/response/token-exchange-rate-response.ts new file mode 100644 index 000000000..ebd88dc2a --- /dev/null +++ b/packages/web/src/repositories/token/response/token-exchange-rate-response.ts @@ -0,0 +1,12 @@ +export interface TokenExchangeRateGraphResponse { + latest: string; + last7d: TokenExchangeRateData[]; + last1m: TokenExchangeRateData[]; + all: TokenExchangeRateData[]; + +} + +export interface TokenExchangeRateData { + time: string; + value: number; +} diff --git a/packages/web/src/repositories/token/token-repository-impl.ts b/packages/web/src/repositories/token/token-repository-impl.ts index 5e2cff563..368c2ec6f 100644 --- a/packages/web/src/repositories/token/token-repository-impl.ts +++ b/packages/web/src/repositories/token/token-repository-impl.ts @@ -14,6 +14,8 @@ import { StorageClient } from "@common/clients/storage-client"; import { NetworkClient } from "@common/clients/network-client"; import { IBalancesByAddressResponse } from "./response/balance-by-address-response"; import { customSort } from "@containers/select-token-container/SelectTokenContainer"; +import mockedExchangeRateGraph from "./mock/token-exchange-rate-graph.json"; +import { TokenExchangeRateGraphResponse } from "./response/token-exchange-rate-response"; export class TokenRepositoryImpl implements TokenRepository { private networkClient: NetworkClient; @@ -27,6 +29,10 @@ export class TokenRepositoryImpl implements TokenRepository { this.localStorageClient = localStorageClient; } + public getExchangeRateGraph = async (): Promise => { + return mockedExchangeRateGraph; + }; + public getTokenByPath = async (path: string): Promise => { const tempPath = path.replace(/\//g, "%2F"); const response = await this.networkClient.get<{ data: ITokenResponse }>({ diff --git a/packages/web/src/repositories/token/token-repository.ts b/packages/web/src/repositories/token/token-repository.ts index 5a7f31fd5..34d81e544 100644 --- a/packages/web/src/repositories/token/token-repository.ts +++ b/packages/web/src/repositories/token/token-repository.ts @@ -8,6 +8,7 @@ import { TokenSearchLogListResponse, } from "./response"; import { IBalancesByAddressResponse } from "./response/balance-by-address-response"; +import { TokenExchangeRateGraphResponse } from "./response/token-exchange-rate-response"; export interface TokenRepository { getTokens: () => Promise; @@ -26,6 +27,8 @@ export interface TokenRepository { getChain: () => Promise; + getExchangeRateGraph: () => Promise; + getBalancesByAddress: ( address: string, ) => Promise; From 43f3f6492c7f8b0f03718ec1256b558ed6ea51b5 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Mon, 6 May 2024 09:10:19 +0700 Subject: [PATCH 33/37] fix: compile error --- packages/swap-router/.ultra.cache.json | 48 +------------------ .../token/token-repository-mock.ts | 6 +++ 2 files changed, 7 insertions(+), 47 deletions(-) diff --git a/packages/swap-router/.ultra.cache.json b/packages/swap-router/.ultra.cache.json index bc2a60943..4fa99a0c3 100644 --- a/packages/swap-router/.ultra.cache.json +++ b/packages/swap-router/.ultra.cache.json @@ -1,47 +1 @@ -{ - "files": { - ".vscode": "1700971955685.2515", - "build": "1713516446907.2502", - "node_modules": "1700891704503.8325", - ".eslintignore": "7de3bd702df2dee92c033c49abbedd0b0f7452e6", - ".eslintrc.js": "ca4815a5cf5cffa1d3fb4a014c8c602f852b002a", - ".gitignore": "c87c9b392c0200d9c9dafc444386ad3e15a85c64", - ".prettierignore": "47bb4656eb55860a075be7799cba7fa955b68141", - ".prettierrc": "fe5f744c7a08b128c935d1e1aed3e8a577e74507", - "jest.config.json": "2e496ee6bd64eb237161dcd69a6957eff2df584d", - "package.json": "4dda70ca76fb6022f6cb20852ecd8d2d95d638d2", - "src/common/array.util.ts": "9482ab121d34cc7e08a0cd33b49173b0b85823d8", - "src/common/bigint.util.ts": "343f4c85ca1f6c840ade68c259ed82bf5b159fb0", - "src/common/index.ts": "861a3167cddfc93e9eb1b6a4ae8229bb9dc2f8fd", - "src/common/mapper.ts": "f7d7b491dff443911a978b34e4cb378bee46c2b7", - "src/common/queue.ts": "ad096fefbe1c5a7339b536b0b8d39dba661b520e", - "src/common/test.util.ts": "3e500df6ec27ba98606acbfcaec9243e22862e43", - "src/constants/index.ts": "9605b149deb525c25f6e93420bbc433ff1c75cd0", - "src/constants/math.constant.ts": "b617851527cabcc9c3bce2c8e39208001d379ad6", - "src/constants/swap.constant.ts": "53e280147c68acfba490bc1f9a0b7bb1580e7280", - "src/index.ts": "691efb21a28bd3f0e6437edcb16192789dbbb7f6", - "src/swap-router/index.ts": "effaf28a826bdf1441437643e8343e7fbd8026b1", - "src/swap-router/swap-router-default.spec.ts": "e78d6591f15c38821bd701796c5281a5000a98ce", - "src/swap-router/swap-router-multi-higher-range-position-pool.spec.ts": "683ce3a82d73e915018e772723700905c3ff7c92", - "src/swap-router/swap-router-multi-lower-range-position-pool.spec.ts": "93bfd18d0a297f3c66743cddcf2fe10c3764e250", - "src/swap-router/swap-router-multi-pair-pools.spec.ts": "642a9f24dc06b4ef5fb6f099b21b1dbec7f09d8f", - "src/swap-router/swap-router-multi-route.spec.ts": "2b37b87049e38971482716b93be7eb2d739ed135", - "src/swap-router/swap-router-single-pair-pools.spec.ts": "8508da991d741ce394e663680b87f56a5c9af30d", - "src/swap-router/swap-router.ts": "97c4ee1a2cb563be921352b60bbd7bff9535fb21", - "src/swap-router/swap-router.types.ts": "2a48987217df238256a0721d227952142a37ce08", - "src/swap-router/utility/index.ts": "4973874904dd9d77d037d72b1ec8aed397716a38", - "src/swap-router/utility/route.util.ts": "d492418c9184e42d3ef29d7760eb18fa013f54c6", - "src/swap-simulator/index.ts": "ef493c5977bdf1123d1197b804f2344ee463870c", - "src/swap-simulator/swap-simulator-default.spec.ts": "867788b12ccc70abe676010aeed5d6b2b58e8036", - "src/swap-simulator/swap-simulator.ts": "48cc4c90a2622d806659fa2f8c4f48d600a2b2db", - "src/swap-simulator/swap-simulator.types.ts": "11d929d55a895b0305375b3b69ac27c49a985ce0", - "src/swap-simulator/utility/cache.util.ts": "c5af86d350610a80a6690846657a35635bbc752a", - "src/swap-simulator/utility/index.ts": "7272f5d23dfa7af2895fca9bb0b17985234ab6e1", - "src/swap-simulator/utility/math.util.ts": "96fbe38cbabe344f6f58220f46c20103e6df4225", - "src/swap-simulator/utility/swap-util.spec.ts": "b7fe082f3fef7e5a912959925924f56f8c36e020", - "src/swap-simulator/utility/swap.util.ts": "f49236f0d22f72b9283244e870d34401d42fe009", - "src/swap-simulator/utility/tick.util.ts": "01d1fc86a1cfcf81aa8932c52bca9738916feab5", - "tsconfig.json": "55467bd5c5eb1b501abe50b952d5f2d9fa0a0d69" - }, - "deps": {} -} +{"files":{"build":"1713170489386.185",".eslintignore":"7de3bd702df2dee92c033c49abbedd0b0f7452e6",".eslintrc.js":"ca4815a5cf5cffa1d3fb4a014c8c602f852b002a",".gitignore":"c87c9b392c0200d9c9dafc444386ad3e15a85c64",".prettierignore":"47bb4656eb55860a075be7799cba7fa955b68141",".prettierrc":"fe5f744c7a08b128c935d1e1aed3e8a577e74507","jest.config.json":"2e496ee6bd64eb237161dcd69a6957eff2df584d","package.json":"4dda70ca76fb6022f6cb20852ecd8d2d95d638d2","src/common/array.util.ts":"9482ab121d34cc7e08a0cd33b49173b0b85823d8","src/common/bigint.util.ts":"343f4c85ca1f6c840ade68c259ed82bf5b159fb0","src/common/index.ts":"861a3167cddfc93e9eb1b6a4ae8229bb9dc2f8fd","src/common/mapper.ts":"f7d7b491dff443911a978b34e4cb378bee46c2b7","src/common/queue.ts":"ad096fefbe1c5a7339b536b0b8d39dba661b520e","src/common/test.util.ts":"3e500df6ec27ba98606acbfcaec9243e22862e43","src/constants/index.ts":"9605b149deb525c25f6e93420bbc433ff1c75cd0","src/constants/math.constant.ts":"b617851527cabcc9c3bce2c8e39208001d379ad6","src/constants/swap.constant.ts":"53e280147c68acfba490bc1f9a0b7bb1580e7280","src/index.ts":"691efb21a28bd3f0e6437edcb16192789dbbb7f6","src/swap-router/index.ts":"effaf28a826bdf1441437643e8343e7fbd8026b1","src/swap-router/swap-router-default.spec.ts":"e78d6591f15c38821bd701796c5281a5000a98ce","src/swap-router/swap-router-multi-higher-range-position-pool.spec.ts":"683ce3a82d73e915018e772723700905c3ff7c92","src/swap-router/swap-router-multi-lower-range-position-pool.spec.ts":"93bfd18d0a297f3c66743cddcf2fe10c3764e250","src/swap-router/swap-router-multi-pair-pools.spec.ts":"642a9f24dc06b4ef5fb6f099b21b1dbec7f09d8f","src/swap-router/swap-router-multi-route.spec.ts":"2b37b87049e38971482716b93be7eb2d739ed135","src/swap-router/swap-router-single-pair-pools.spec.ts":"8508da991d741ce394e663680b87f56a5c9af30d","src/swap-router/swap-router.ts":"97c4ee1a2cb563be921352b60bbd7bff9535fb21","src/swap-router/swap-router.types.ts":"2a48987217df238256a0721d227952142a37ce08","src/swap-router/utility/index.ts":"4973874904dd9d77d037d72b1ec8aed397716a38","src/swap-router/utility/route.util.ts":"d492418c9184e42d3ef29d7760eb18fa013f54c6","src/swap-simulator/index.ts":"ef493c5977bdf1123d1197b804f2344ee463870c","src/swap-simulator/swap-simulator-default.spec.ts":"867788b12ccc70abe676010aeed5d6b2b58e8036","src/swap-simulator/swap-simulator.ts":"48cc4c90a2622d806659fa2f8c4f48d600a2b2db","src/swap-simulator/swap-simulator.types.ts":"11d929d55a895b0305375b3b69ac27c49a985ce0","src/swap-simulator/utility/cache.util.ts":"c5af86d350610a80a6690846657a35635bbc752a","src/swap-simulator/utility/index.ts":"7272f5d23dfa7af2895fca9bb0b17985234ab6e1","src/swap-simulator/utility/math.util.ts":"96fbe38cbabe344f6f58220f46c20103e6df4225","src/swap-simulator/utility/swap-util.spec.ts":"b7fe082f3fef7e5a912959925924f56f8c36e020","src/swap-simulator/utility/swap.util.ts":"f49236f0d22f72b9283244e870d34401d42fe009","src/swap-simulator/utility/tick.util.ts":"01d1fc86a1cfcf81aa8932c52bca9738916feab5","tsconfig.json":"55467bd5c5eb1b501abe50b952d5f2d9fa0a0d69"},"deps":{}} \ No newline at end of file diff --git a/packages/web/src/repositories/token/token-repository-mock.ts b/packages/web/src/repositories/token/token-repository-mock.ts index ac4b419ac..e9927b2a4 100644 --- a/packages/web/src/repositories/token/token-repository-mock.ts +++ b/packages/web/src/repositories/token/token-repository-mock.ts @@ -15,6 +15,8 @@ import TokenDetail from "./mock/token-detail.json"; import ChainData from "./mock/token-chain.json"; import TokenByPath from "./mock/token-by-path.json"; import { IBalancesByAddressResponse } from "./response/balance-by-address-response"; +import { TokenExchangeRateGraphResponse } from "./response/token-exchange-rate-response"; +import mockedExchangeRateGraph from "./mock/token-exchange-rate-graph.json"; export class TokenRepositoryMock implements TokenRepository { private localStorageClient: StorageClient; @@ -22,6 +24,10 @@ export class TokenRepositoryMock implements TokenRepository { constructor(localStorageClient: StorageClient) { this.localStorageClient = localStorageClient; } + + public getExchangeRateGraph = async (): Promise => { + return mockedExchangeRateGraph; + }; public getTokens = async (): Promise => { return { tokens: [] }; From 34e8f7930ada08265dc7c0b6a5d23c82c27aa335 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Mon, 6 May 2024 11:54:04 +0700 Subject: [PATCH 34/37] refactor: number format refactor --- .../common/line-graph/LineGraph.tsx | 19 +++++-- .../SelectPriceRangeCustom.tsx | 52 +++++++++---------- .../SelectPriceRangeCustomPosition.tsx | 28 +++++----- .../EarnMyPositionNoLiquidity.tsx | 8 +-- .../ExchangeRateGraphContent.tsx | 1 - .../pool/my-position-card/MyPositionCard.tsx | 6 +-- .../PoolPairInfoContent.tsx | 2 +- .../one-click-staking/OneClickStaking.tsx | 12 ++--- .../SwapLiquidityContainer.tsx | 16 +++--- .../earn/use-one-click-staking-modal.tsx | 4 +- .../use-earn-add-liquidity-confirm-modal.tsx | 22 ++++---- .../web/src/models/pool/mapper/pool-mapper.ts | 4 +- packages/web/src/utils/number-utils.ts | 19 +++++-- .../web/src/utils/stake-position-utils.ts | 31 ++++++----- 14 files changed, 123 insertions(+), 101 deletions(-) diff --git a/packages/web/src/components/common/line-graph/LineGraph.tsx b/packages/web/src/components/common/line-graph/LineGraph.tsx index 1bda5c364..9b359c848 100644 --- a/packages/web/src/components/common/line-graph/LineGraph.tsx +++ b/packages/web/src/components/common/line-graph/LineGraph.tsx @@ -195,10 +195,16 @@ const LineGraph = ({ const currentBaseLineValue = bottomBaseLineValue + (index / (baseLineCount - 1)) * baseLineGap; if (currentBaseLineValue < 1) { - return subscriptFormat(currentBaseLineValue.toString()); + return subscriptFormat(currentBaseLineValue.toString(), { significantDigits: 3, subscriptOffset: 3 }); } - return convertToKMB(currentBaseLineValue.toString()); + if (currentBaseLineValue >= 1 && currentBaseLineValue < 100) { + return convertToKMB(currentBaseLineValue.toString(), { maximumSignificantDigits: 4 }); + } + + const result = Math.round(currentBaseLineValue).toString(); + + return convertToKMB(result, { maximumFractionDigits: 0, minimumFractionDigits: 0 }); }); setBaseLineYAxis([...baseLineData]); @@ -215,7 +221,7 @@ const LineGraph = ({ return prev; }); - return longestNumber.length / maxLength * 44; + return longestNumber.length / maxLength * 52; })(); setBaseLineNumberWidth(baseLineNumberWidthComputation); @@ -402,7 +408,8 @@ const LineGraph = ({ return path; }, [height, points, smooth]); - const offsetPixel = useMemo(() => 5, []); + const offsetPixel = useMemo(() => 3, []); + const isLightTheme = theme.themeKey === "light"; return ( - + {isLightTheme + ? + : } diff --git a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx index eb1fb7f06..6a7c53646 100644 --- a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx +++ b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx @@ -44,7 +44,7 @@ export interface SelectPriceRangeCustomProps { export interface SelectPriceRangeCustomHandle { resetRange: (priceRangeType?: PriceRangeType | null) => void; -} +} const SelectPriceRangeCustom = forwardRef(({ tokenA, @@ -138,7 +138,7 @@ const SelectPriceRangeCustom = forwardRef1 {currentTokenA.symbol} =   {currentTokenB.symbol}; + return <>1 {currentTokenA.symbol} =   {currentTokenB.symbol}; } - return <>1 {currentTokenA.symbol} =   {currentTokenB.symbol}; + return <>1 {currentTokenA.symbol} =   {currentTokenB.symbol}; }, [currentTokenA, currentTokenB, defaultPrice, selectPool.isCreate, startingPriceValue]); const onClickTabItem = useCallback((symbol: string) => { @@ -175,7 +175,7 @@ const SelectPriceRangeCustom = forwardRef { - if(selectPool.selectedFullRange) { + if (selectPool.selectedFullRange) { setPriceRange("Custom"); } }, [selectPool.selectedFullRange]); @@ -259,8 +259,8 @@ const SelectPriceRangeCustom = forwardRef { - if(selectPool.selectedFullRange) { + useEffect(() => { + if (selectPool.selectedFullRange) { minPriceRangeCustomRef.current?.formatData(); maxPriceRangeCustomRef.current?.formatData(); } @@ -275,7 +275,7 @@ const SelectPriceRangeCustom = forwardRef; } @@ -319,24 +319,24 @@ const SelectPriceRangeCustom = forwardRef + />
- - - - - - -
-
- - - - - - -
+ + + + + + +
+
+ + + + + + +
)} @@ -416,7 +416,7 @@ const SelectPriceRangeCustom = forwardRef
{ - if(priceRangeType !== resetPriceRangeTypeTarget) { + if (priceRangeType !== resetPriceRangeTypeTarget) { setPriceRange(resetPriceRangeTypeTarget); resetRange(resetPriceRangeTypeTarget); } diff --git a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustomPosition.tsx b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustomPosition.tsx index 84a4454f4..513b1f59c 100644 --- a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustomPosition.tsx +++ b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustomPosition.tsx @@ -116,7 +116,7 @@ const SelectPriceRangeCustom: React.FC = ({ if (!selectPool.currentPrice) { return "-"; } - const currentPrice = convertToKMB(selectPool.currentPrice.toFixed(4), 4); + const currentPrice = convertToKMB(selectPool.currentPrice.toFixed(4), { maximumFractionDigits: 4 }); return `1 ${currentTokenA.symbol} = ${currentPrice} ${currentTokenB.symbol}`; }, [currentTokenA.symbol, currentTokenB.symbol, selectPool.currentPrice]); @@ -126,7 +126,7 @@ const SelectPriceRangeCustom: React.FC = ({ } const currentPrice = convertToKMB( (1 / selectPool.currentPrice).toString(), - 4, + { maximumFractionDigits: 4 }, ); return `1 ${currentTokenB.symbol} = ${currentPrice} ${currentTokenA.symbol}`; }, [currentTokenA.symbol, currentTokenB.symbol, selectPool.currentPrice]); @@ -251,17 +251,15 @@ const SelectPriceRangeCustom: React.FC = ({
@@ -269,17 +267,15 @@ const SelectPriceRangeCustom: React.FC = ({
@@ -354,7 +350,7 @@ const SelectPriceRangeCustom: React.FC = ({ increase={selectPool.increaseMinTick} currentPriceStr={currentPriceStr} setIsChangeMinMax={selectPool.setIsChangeMinMax} - // priceRangeType={priceRangeType} + // priceRangeType={priceRangeType} /> = ({ increase={selectPool.increaseMaxTick} currentPriceStr={currentPriceStrReverse} setIsChangeMinMax={selectPool.setIsChangeMinMax} - // priceRangeType={priceRangeType} + // priceRangeType={priceRangeType} />
diff --git a/packages/web/src/components/earn/earn-my-positions-no-liquidity/EarnMyPositionNoLiquidity.tsx b/packages/web/src/components/earn/earn-my-positions-no-liquidity/EarnMyPositionNoLiquidity.tsx index 0b742616a..1bccab1b8 100644 --- a/packages/web/src/components/earn/earn-my-positions-no-liquidity/EarnMyPositionNoLiquidity.tsx +++ b/packages/web/src/components/earn/earn-my-positions-no-liquidity/EarnMyPositionNoLiquidity.tsx @@ -18,20 +18,20 @@ const EarnMyPositionNoLiquidity: React.FC< const { balances: balancesPrice } = useTokenData(); const { data: tokenPrices = {} } = useGetTokenPrices(); const availableBalance = useMemo(() => { - return Object.entries(balancesPrice).reduce((acc, [key, value]) => { + return Object.entries(balancesPrice).reduce((acc, [key, value]) => { const path = key === "gnot" ? WRAPPED_GNOT_PATH : key; const balance = BigNumber(value || 0).multipliedBy(tokenPrices?.[path]?.pricesBefore?.latestPrice || 0).dividedBy(10 ** 6).toNumber() || 0; return BigNumber(acc).plus(balance).toNumber(); }, 0); }, [balancesPrice, tokenPrices]); const isInterger = Number.isInteger(Number(availableBalance)); - const converted = `$${convertToKMB(`${availableBalance}`, isInterger ? 0 : 2, isInterger ? 0 : 2).toString()}`; + const converted = `$${convertToKMB(`${availableBalance}`, { maximumFractionDigits: isInterger ? 0 : 2, minimumFractionDigits: isInterger ? 0 : 2 }).toString()}`; // TODO : Added Recoil OR Props const apr = "999%"; - + return ( - +

You have {converted} in your wallet available to earn rewards up to diff --git a/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.tsx b/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.tsx index 6c962f055..a208230fc 100644 --- a/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.tsx +++ b/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.tsx @@ -159,7 +159,6 @@ function ExchangeRateGraphContent({ }} showBaseLine renderBottom={(baseLineNumberWidth) => { - console.log("🚀 ~ baseLineNumberWidth:", baseLineNumberWidth); return

{labelIndicesToShow.map((x, i) => ( diff --git a/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx b/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx index d8513127e..b7e0c0e23 100644 --- a/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx +++ b/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx @@ -271,7 +271,7 @@ const MyPositionCard: React.FC = ({ if (isSwap) { return <>1 {tokenB?.symbol} = {tokenA?.symbol}; } return <>1 {tokenA?.symbol} = {tokenB?.symbol}; @@ -341,7 +341,7 @@ const MyPositionCard: React.FC = ({ ? "0 " : !isSwap ? Number(minPrice) - : convertToKMB(`${Number(1 / Number(maxPrice))}`, 6); + : convertToKMB(`${Number(1 / Number(maxPrice))}`, { maximumFractionDigits: 6 }); return `${tokenAPriceStr}`; }, [ position.tickUpper, @@ -392,7 +392,7 @@ const MyPositionCard: React.FC = ({ ? "∞ " : !isSwap ? maxPrice - : convertToKMB(`${Number(1 / Number(minPrice))}`, 6); + : convertToKMB(`${Number(1 / Number(minPrice))}`, { maximumFractionDigits: 6 }); return `${tokenBPriceStr}`; }, [ position.tickLower, diff --git a/packages/web/src/components/pool/pool-pair-info-content/PoolPairInfoContent.tsx b/packages/web/src/components/pool/pool-pair-info-content/PoolPairInfoContent.tsx index cfa01593c..dff947514 100644 --- a/packages/web/src/components/pool/pool-pair-info-content/PoolPairInfoContent.tsx +++ b/packages/web/src/components/pool/pool-pair-info-content/PoolPairInfoContent.tsx @@ -257,7 +257,7 @@ const PoolPairInfoContent: React.FC = ({ width={20} className="image-logo" /> - {width >= 768 && `1 ${pool?.tokenB?.symbol}`} = 400 ? 6 : 2))}`, 6)} /> {pool?.tokenA?.symbol} + {width >= 768 && `1 ${pool?.tokenB?.symbol}`} = 400 ? 6 : 2))}`, { maximumFractionDigits: 6 })} /> {pool?.tokenA?.symbol}
}
diff --git a/packages/web/src/components/stake/one-click-staking/OneClickStaking.tsx b/packages/web/src/components/stake/one-click-staking/OneClickStaking.tsx index 494e4aa40..f34649ce0 100644 --- a/packages/web/src/components/stake/one-click-staking/OneClickStaking.tsx +++ b/packages/web/src/components/stake/one-click-staking/OneClickStaking.tsx @@ -28,7 +28,7 @@ const OneClickStaking: React.FC = ({ const [swapValue] = useAtom(SwapState.swap); const { getGnotPath } = useGnotToGnot(); const { tokenA: tokenAInfo = null, tokenB: tokenBInfo = null } = swapValue; - const [initialized, setInitialized] = useState<{tokenA: TokenModel | null, tokenB: TokenModel | null}>({ tokenA: null, tokenB: null }); + const [initialized, setInitialized] = useState<{ tokenA: TokenModel | null, tokenB: TokenModel | null }>({ tokenA: null, tokenB: null }); const tokenA = tokenAInfo ? { ...tokenAInfo, @@ -50,12 +50,12 @@ const OneClickStaking: React.FC = ({ const temp = [initialized?.tokenA?.symbol, initialized?.tokenB?.symbol].sort(); const tempToken = [tokenA?.symbol, tokenB?.symbol].sort(); const condition = temp[0] === tempToken[0] && temp[1] === tempToken[1]; - + if (!condition) { - setInitialized({ tokenA, tokenB}); + setInitialized({ tokenA, tokenB }); } }, [tokenA?.symbol, tokenB?.symbol, initialized]); - + const isStakedPositions = useMemo(() => { return stakedPositions.length > 0; }, [stakedPositions]); @@ -81,7 +81,7 @@ const OneClickStaking: React.FC = ({ }, [pool.volume24h]); const feeChangedStr = useMemo((): string => { - return `$${convertToKMB(`${Math.round(Number(pool.feeChange))}`, 2)}`; + return `$${convertToKMB(`${Math.round(Number(pool.feeChange))}`, { maximumFractionDigits: 2 })}`; }, [pool.feeChange]); const rewardTokens = useMemo(() => { @@ -133,7 +133,7 @@ const OneClickStaking: React.FC = ({
Staking APR
- + {pool.stakingApr || "-"}
diff --git a/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx b/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx index df58d3c4d..55afa4e03 100644 --- a/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx +++ b/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx @@ -75,16 +75,16 @@ const SwapLiquidityContainer: React.FC = () => { const { tokenA, tokenB } = swapValue; const router = useRouter(); const createPool = () => { - router.push({ pathname: "/earn/add", query: { tokenA: tokenA?.path as string, tokenB: tokenB?.path as string }}, "/earn/add"); + router.push({ pathname: "/earn/add", query: { tokenA: tokenA?.path as string, tokenB: tokenB?.path as string } }, "/earn/add"); }; - - const poolDetail: PoolModel[]= useMemo(() => { + + const poolDetail: PoolModel[] = useMemo(() => { const tokenAPath = tokenA?.path === "gnot" ? wugnotPath : tokenA?.path; const tokenBPath = tokenB?.path === "gnot" ? wugnotPath : tokenB?.path; const pools: PoolModel[] = poolList.filter((item: PoolModel) => (item.poolPath?.includes(`${tokenAPath}:${tokenBPath}`) || item.poolPath?.includes(`${tokenBPath}:${tokenAPath}`))); return pools; }, [poolList, tokenA, tokenB, wugnotPath]); - + const liquidityListRandom = useMemo(() => { let count = 0; const temp = dummyLiquidityList.map((_) => { @@ -94,7 +94,7 @@ const SwapLiquidityContainer: React.FC = () => { return { ..._, volume: `${toUnitFormat(Number(poolItem[0].volume24h), true, true)}`, - liquidity: `$${convertToKMB(poolItem[0].tvl.toString(), 2)}`, + liquidity: `$${convertToKMB(poolItem[0].tvl.toString(), { maximumFractionDigits: 2 })}`, apr: !poolItem[0].apr ? "-" : `${Number(poolItem[0].apr).toFixed(2)}%`, active: true, id: poolItem[0].id, @@ -107,7 +107,7 @@ const SwapLiquidityContainer: React.FC = () => { } return temp; }, [poolDetail]); - + const tokenAData = useMemo(() => { if (!tokenA) return null; return { @@ -131,9 +131,9 @@ const SwapLiquidityContainer: React.FC = () => { }, [tokenB, gnot]); const checkDoubleGnot = (tokenAData?.path === "gnot" && tokenBData?.path === "gnot") || (tokenBData?.path === "gnot" && tokenAData?.path === "gnot"); - + if (!tokenAData || !tokenBData || isLoading || checkDoubleGnot) return null; - + return ( `${info.fee}` === fee, ); - + return { poolId: id, incentivizedType, @@ -92,7 +92,7 @@ export class PoolMapper { tokenB, feeTier: feeTierInfo?.type || "NONE", apr: !apr ? "-" : `${BigNumber(apr || 0).toFormat(2)}%`, - liquidity: `${convertToKMB(Math.round(tvl).toString(), 2)}`, + liquidity: `${convertToKMB(Math.round(tvl).toString(), { maximumFractionDigits: 2 })}`, volume24h: `${customVolume.replace(REGEX_NUMBER_FORMAT, "$1")}`, fees24h: `${convertToMB(Number(feeVolume).toString(), 2)}`, rewardTokens, diff --git a/packages/web/src/utils/number-utils.ts b/packages/web/src/utils/number-utils.ts index 0f0f1e690..a9bc137d2 100644 --- a/packages/web/src/utils/number-utils.ts +++ b/packages/web/src/utils/number-utils.ts @@ -297,15 +297,26 @@ export function countZeros(decimalFraction: string) { return Math.abs(exponent); } -export function subscriptFormat(number: string | number) { +export function subscriptFormat( + number: string | number, + options?: { + significantDigits?: number, + subscriptOffset?: number + } +) { const numberStr = number.toString(); const numberOfZero = countZeros(numberStr); + const significantDigits = options?.significantDigits || 5; + const zeroCountOffset = options?.subscriptOffset ? (options?.subscriptOffset + 1) : 5; + const subscriptZeroCharCode = 8320; - if(numberOfZero <= 5) { - return removeTrailingZeros(Number(numberStr).toFixed(Math.min((numberOfZero - 1) + 5, numberStr.length))); + if(numberOfZero <= zeroCountOffset) { + return removeTrailingZeros(Number(numberStr).toLocaleString("en-US", { + maximumSignificantDigits: significantDigits + })); } - const result = `0.0${String.fromCharCode(8320 + Number(numberOfZero - 1))}${removeTrailingZeros(numberStr.slice(numberOfZero + 1, numberOfZero + 6))}`; + const result = `0.0${String.fromCharCode(subscriptZeroCharCode + Number(numberOfZero - 1))}${removeTrailingZeros(numberStr.slice(numberOfZero + 1, numberOfZero + 6))}`; return result; } diff --git a/packages/web/src/utils/stake-position-utils.ts b/packages/web/src/utils/stake-position-utils.ts index f67a5f47f..d8c0e014f 100644 --- a/packages/web/src/utils/stake-position-utils.ts +++ b/packages/web/src/utils/stake-position-utils.ts @@ -37,12 +37,15 @@ export const convertToMB = (price: string, maximumFractionDigits?: number) => { export const convertToKMB = ( price: string, - maximumFractionDigits?: number, - minimumFractionDigits?: number, -) => { + options?: { + maximumFractionDigits?: number, + minimumFractionDigits?: number, + minimumSignificantDigits?: number, + maximumSignificantDigits?: number, +}) => { if (Number.isNaN(Number(price))) return "-"; - - const significantNumber = 5; + + const maximumSignificantDigits = options?.maximumSignificantDigits || 5; const convertOffset = 999; const intPart = Math.trunc(Number(price)); @@ -51,12 +54,16 @@ export const convertToKMB = ( if (Number(price) < 0.000001 && Number(price) !== 0) return "0.000001"; if (Number(price) < 1) return `${Number(Number(price).toFixed(6))}`; - const defaultDecimalDigit = significantNumber - intPart.toString().length; - - return removeTrailingZeros(Number(price).toLocaleString("en-US", { - maximumFractionDigits: maximumFractionDigits ?? defaultDecimalDigit, - minimumFractionDigits: minimumFractionDigits ?? defaultDecimalDigit, + const result = removeTrailingZeros(Number(price).toLocaleString("en-US", { + maximumSignificantDigits: maximumSignificantDigits, + minimumSignificantDigits: options?.minimumSignificantDigits, + maximumFractionDigits: options?.maximumFractionDigits, + minimumFractionDigits: options?.minimumFractionDigits, })); + console.log("🚀 ~ result ~ result:", result); + + + return result; } else { const temp = Math.floor(Number(price)); if (temp >= 1e9) { @@ -85,8 +92,8 @@ export const convertToKMB = ( ); } return Number.isInteger(price) ? `${Number(price)}` : Number(price).toLocaleString("en-US", { - maximumFractionDigits: maximumFractionDigits ?? 2, - minimumFractionDigits: minimumFractionDigits ?? 2, + maximumFractionDigits: options?.maximumFractionDigits ?? 2, + minimumFractionDigits: options?.minimumFractionDigits ?? 2, }); } }; From 755670f0e5f08ef65168ce12fd926b6a25271cf7 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Tue, 7 May 2024 08:51:35 +0700 Subject: [PATCH 35/37] fix: minor fix --- packages/web/src/components/common/line-graph/LineGraph.tsx | 2 +- .../ExchangeRateGraphContent.styles.ts | 1 - packages/web/src/utils/stake-position-utils.ts | 4 +++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/web/src/components/common/line-graph/LineGraph.tsx b/packages/web/src/components/common/line-graph/LineGraph.tsx index 9b359c848..791e8557e 100644 --- a/packages/web/src/components/common/line-graph/LineGraph.tsx +++ b/packages/web/src/components/common/line-graph/LineGraph.tsx @@ -199,7 +199,7 @@ const LineGraph = ({ } if (currentBaseLineValue >= 1 && currentBaseLineValue < 100) { - return convertToKMB(currentBaseLineValue.toString(), { maximumSignificantDigits: 4 }); + return convertToKMB(currentBaseLineValue.toString(), { maximumFractionDigits: 2, minimumFractionDigits: 2, }); } const result = Math.round(currentBaseLineValue).toString(); diff --git a/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.styles.ts b/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.styles.ts index 208144be8..05b67dd93 100644 --- a/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.styles.ts +++ b/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.styles.ts @@ -6,7 +6,6 @@ import mixins from "@styles/mixins"; export const ExchangeRateGraphContentWrapper = styled.div` ${mixins.flexbox("column", "flex-start", "flex-start")}; width: 100%; - background-color: ${({ theme }) => theme.color.background15}; border-radius: 8px; padding: 0 0 12px 0; ${media.mobile} { diff --git a/packages/web/src/utils/stake-position-utils.ts b/packages/web/src/utils/stake-position-utils.ts index d8c0e014f..73ba6751b 100644 --- a/packages/web/src/utils/stake-position-utils.ts +++ b/packages/web/src/utils/stake-position-utils.ts @@ -45,7 +45,9 @@ export const convertToKMB = ( }) => { if (Number.isNaN(Number(price))) return "-"; - const maximumSignificantDigits = options?.maximumSignificantDigits || 5; + const defaultMaximumSignificantDigits = 5; + const isDefaultSignificantDigits = !options?.maximumFractionDigits && !options?.minimumFractionDigits; + const maximumSignificantDigits = options?.maximumSignificantDigits || (isDefaultSignificantDigits ? defaultMaximumSignificantDigits : undefined); const convertOffset = 999; const intPart = Math.trunc(Number(price)); From 86c751fd4a30bc07573400283d59427251355542 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Tue, 7 May 2024 13:48:59 +0700 Subject: [PATCH 36/37] fix: resolve git comment --- .../common/exchange-rate/ExchangeRate.tsx | 2 - .../common/line-graph/LineGraph.tsx | 2 +- .../common/pool-graph/PoolGraph.tsx | 49 +- .../SelectPriceRangeCustom.tsx | 3 +- .../ExchangeRateGraphContent.tsx | 32 +- .../exchange-rate-graph/ExchangeRateGraph.tsx | 22 +- packages/web/src/constants/option.constant.ts | 5 + .../PoolAddLiquidityContainer.tsx | 39 +- .../web/src/repositories/dashboard/res.ts | 1451 ----------------- .../web/src/utils/stake-position-utils.ts | 2 - 10 files changed, 63 insertions(+), 1544 deletions(-) delete mode 100644 packages/web/src/repositories/dashboard/res.ts diff --git a/packages/web/src/components/common/exchange-rate/ExchangeRate.tsx b/packages/web/src/components/common/exchange-rate/ExchangeRate.tsx index 5a892537b..162cd03e8 100644 --- a/packages/web/src/components/common/exchange-rate/ExchangeRate.tsx +++ b/packages/web/src/components/common/exchange-rate/ExchangeRate.tsx @@ -7,8 +7,6 @@ interface Props { } const ExchangeRate: React.FC = ({ value }) => { - value >= 147 && console.log(value); - const exchangePrice = useMemo(() => formatExchangeRate(value), [value]); return ( diff --git a/packages/web/src/components/common/line-graph/LineGraph.tsx b/packages/web/src/components/common/line-graph/LineGraph.tsx index 791e8557e..558132615 100644 --- a/packages/web/src/components/common/line-graph/LineGraph.tsx +++ b/packages/web/src/components/common/line-graph/LineGraph.tsx @@ -125,7 +125,7 @@ function parseTimeTVL(time: string) { }; } -const LineGraph = ({ +const LineGraph: React.FC = ({ className = "", cursor, color, diff --git a/packages/web/src/components/common/pool-graph/PoolGraph.tsx b/packages/web/src/components/common/pool-graph/PoolGraph.tsx index 8ef6c8a52..683001552 100644 --- a/packages/web/src/components/common/pool-graph/PoolGraph.tsx +++ b/packages/web/src/components/common/pool-graph/PoolGraph.tsx @@ -94,9 +94,10 @@ const PoolGraph: React.FC = ({ const boundsWidth = width - margin.right - margin.left; const boundsHeight = height - margin.top - margin.bottom; + // D3 - Dimension Definition const minX = d3.min(bins, (bin) => bin.minTick - defaultMinX) || 0; const maxX = d3.max(bins, (bin) => bin.maxTick - defaultMinX) || 0; - + const resolvedBins = useMemo(() => { const length = bins.length / 2; const convertReserveBins = bins.map((item, index) => { @@ -110,7 +111,7 @@ const PoolGraph: React.FC = ({ index: index, }; }); - + const maxHeight = d3.max(convertReserveBins, (bin) => bin.reserveTokenAMap) || 0; const temp = convertReserveBins.sort((b1, b2) => b1.minTick - b2.minTick).map(bin => { return { @@ -122,19 +123,21 @@ const PoolGraph: React.FC = ({ maxTickSwap: bin.maxTick - defaultMinX, }; }); - const revereTemp = temp.map((item, i) => ({...temp[length * 2 - i - 1], minTick: item.minTick, maxTick: item.maxTick, minTickSwap: temp[length * 2 - i - 1].minTick, maxTickSwap: temp[length * 2 - i - 1].maxTick})); + const revereTemp = temp.map((item, i) => ({ + ...temp[length * 2 - i - 1], + minTick: item.minTick, + maxTick: item.maxTick, + minTickSwap: temp[length * 2 - i - 1].minTick, + maxTickSwap: temp[length * 2 - i - 1].maxTick + })); return !isSwap ? temp : revereTemp; - + }, [bins, boundsHeight, defaultMinX, poolPrice, isSwap]); - + const maxHeight = d3.max(resolvedBins, (bin) => bin.reserveTokenMap) || 0; - const [tickOfPrices, setTickOfPrices] = useState<{ [key in number]: string }>({}); - const [tooltipInfo, setTooltipInfo] = useState(null); - const [positionX, setPositionX] = useState(null); - const [positionY, setPositionY] = useState(null); - /** D3 Variables */ + // D3 - Scale Definition const defaultScaleX = d3 .scaleLinear() .domain([0, maxX - minX]) @@ -150,6 +153,11 @@ const PoolGraph: React.FC = ({ }, [boundsHeight, maxHeight]); const centerX = currentTick ?? ((minX && maxX) ? (minX + maxX) / 2 : 0); + const [tickOfPrices, setTickOfPrices] = useState<{ [key in number]: string }>({}); + const [tooltipInfo, setTooltipInfo] = useState(null); + const [positionX, setPositionX] = useState(null); + const [positionY, setPositionY] = useState(null); + function getTickSpacing() { if (resolvedBins.length < 1) { return 0; @@ -179,7 +187,7 @@ const PoolGraph: React.FC = ({ return `${isStart ? "right" : "left"}`; }, [width, height, positionX, positionY, position]); const random = Math.random().toString(); - + /** Update Chart by data */ function updateChart() { const tickSpacing = getTickSpacing(); @@ -192,7 +200,7 @@ const PoolGraph: React.FC = ({ if (isSwap) { isBlackBar = !!(maxTickPosition && minTickPosition && (scaleX(bin.minTick) < scaleX(maxX) - maxTickPosition - tickSpacing || scaleX(bin.minTick) > scaleX(maxX) - minTickPosition)); } - if (isBlackBar) + if (isBlackBar) return themeKey === "dark" ? "#1C2230" : "#E0E8F4"; if (currentTick && (bin.minTick) < Number(currentTick - defaultMinX)) { return `url(#gradient-bar-green-${random})`; @@ -203,12 +211,13 @@ const PoolGraph: React.FC = ({ // Clean child elements. d3.select(chartRef.current).selectChildren().remove(); - + // Create a chart bar. const rects = d3.select(chartRef.current); rects.attr("clip-path", "url(#clip)"); + // D3 - Draw Current tick (middle line) if (currentTick) { rects.append("line") .attr("x1", centerPosition + tickSpacing / 2 - 0.5) @@ -219,7 +228,8 @@ const PoolGraph: React.FC = ({ .attr("stroke", `${themeKey === "dark" ? "#E0E8F4" : "#596782"}`) .attr("stroke-width", 1); } - + + // D3 - Draw bins as bars rects.selectAll("rects") .data(resolvedBins) .enter() @@ -238,7 +248,7 @@ const PoolGraph: React.FC = ({ return boundsHeight - scaleYComputation + (scaleYComputation > (height - 3) && scaleYComputation !== height ? 3 : 0); }); // Create a line of current tick. - + } function onMouseoverChartBin(event: MouseEvent) { @@ -258,7 +268,7 @@ const PoolGraph: React.FC = ({ } return mouseX >= minX && mouseX <= maxX; }); - + if (!bin) { setPositionX(null); setPositionY(null); @@ -351,8 +361,9 @@ const PoolGraph: React.FC = ({ }).then(setTickOfPrices); } }, [bins]); - + useEffect(() => { + // D3 - Draw bin and define interaction const svgElement = d3.select(svgRef.current) .attr("width", width) .attr("height", height) @@ -367,7 +378,7 @@ const PoolGraph: React.FC = ({ .attr("width", width) .attr("height", height); - if(!!width && !!height && !!scaleX && !!scaleY) { + if (!!width && !!height && !!scaleX && !!scaleY) { updateChart(); } }, [width, height, scaleX, scaleY]); @@ -396,7 +407,7 @@ const PoolGraph: React.FC = ({ content={ tooltipInfo ? ( - + ) : null }> diff --git a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx index 6a7c53646..b8792563d 100644 --- a/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx +++ b/packages/web/src/components/common/select-price-range-custom/SelectPriceRangeCustom.tsx @@ -8,7 +8,7 @@ import PoolSelectionGraph from "../pool-selection-graph/PoolSelectionGraph"; import { TokenModel } from "@models/token/token-model"; import { SelectPool } from "@hooks/pool/use-select-pool"; import * as d3 from "d3"; -import { PriceRangeType, SwapFeeTierPriceRange } from "@constants/option.constant"; +import { DefaultTick, PriceRangeType, SwapFeeTierPriceRange } from "@constants/option.constant"; import LoadingSpinner from "../loading-spinner/LoadingSpinner"; import { tickToPrice } from "@utils/swap-utils"; import { MAX_TICK } from "@constants/swap.constant"; @@ -24,7 +24,6 @@ import Tooltip from "../tooltip/Tooltip"; import { useGnotToGnot } from "@hooks/token/use-gnot-wugnot"; import ExchangeRate from "../exchange-rate/ExchangeRate"; import { subscriptFormat } from "@utils/number-utils"; -import { DefaultTick } from "@containers/pool-add-liquidity-container/PoolAddLiquidityContainer"; export interface SelectPriceRangeCustomProps { tokenA: TokenModel; diff --git a/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.tsx b/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.tsx index a208230fc..d9f148531 100644 --- a/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.tsx +++ b/packages/web/src/components/pool/exchange-rate-graph-content/ExchangeRateGraphContent.tsx @@ -20,33 +20,6 @@ interface ExchangeRateGraphContentProps { data?: TokenExchangeRateGraphResponse } -const calculateMiddleIndices = (totalLabels = 0, countXAxis = 0) => { - const indices = new Set(); - // Helper function to add indices - const addIndices = (start: number, end: number) => { - const mid = Math.floor((start + end) / 2); - if (!indices.has(mid)) { - indices.add(mid); - if (indices.size < countXAxis) { - // Add midpoint of the left subarray - addIndices(start, mid - 1); - // Add midpoint of the right subarray - addIndices(mid + 1, end); - } - } - }; - - // Always include the first and last labels - indices.add(0); - indices.add(totalLabels - 1); - - // Begin by adding the middle of the entire array - addIndices(0, totalLabels - 1); - - // Convert to array and sort to ensure the correct order - return Array.from(indices).sort((a, b) => b - a); -}; - function ExchangeRateGraphContent({ tokenA, tokenB, @@ -124,7 +97,8 @@ function ExchangeRateGraphContent({ }, [size.width, breakpoint]); const labelIndicesToShow = useMemo(() => { - return calculateMiddleIndices(xAxisLabels?.length, Math.min(countXAxis, 4)); + const spacing = ((xAxisLabels?.length ?? 0) - 1) / (countXAxis - 1); + return Array.from({ length: countXAxis }, (_, index) => Math.floor(spacing * index)).reverse(); }, [countXAxis, xAxisLabels?.length]); return ( @@ -161,7 +135,7 @@ function ExchangeRateGraphContent({ renderBottom={(baseLineNumberWidth) => { return
- {labelIndicesToShow.map((x, i) => ( + {labelIndicesToShow?.map((x, i) => ( {xAxisLabels?.[x]} ))}
diff --git a/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.tsx b/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.tsx index f0e9adad7..fbb0cca79 100644 --- a/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.tsx +++ b/packages/web/src/components/pool/exchange-rate-graph/ExchangeRateGraph.tsx @@ -20,19 +20,17 @@ function ExchangeRateGraph({ onSwap, data, }: ExchangeRateGraphProps) { - return ( + return

Exchange Rate

- {true && ( -
- Exchange rate for the selected token pair.} - > - - -
- )} + {
+ Exchange rate for the selected token pair.} + > + + +
} - ); + ; } export default ExchangeRateGraph; \ No newline at end of file diff --git a/packages/web/src/constants/option.constant.ts b/packages/web/src/constants/option.constant.ts index 05d5873ae..cbdaafcc8 100644 --- a/packages/web/src/constants/option.constant.ts +++ b/packages/web/src/constants/option.constant.ts @@ -374,3 +374,8 @@ export const STAKING_PERIOD_INFO: { period: -1, }, } as const; + +export interface DefaultTick { + tickLower?: number, + tickUpper?: number +} diff --git a/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx b/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx index d3e4083a9..1b17aed09 100644 --- a/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx +++ b/packages/web/src/containers/pool-add-liquidity-container/PoolAddLiquidityContainer.tsx @@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; import EarnAddLiquidity from "@components/earn-add/earn-add-liquidity/EarnAddLiquidity"; import { AddLiquiditySubmitType, + DefaultTick, PriceRangeType, SwapFeeTierType, } from "@constants/option.constant"; @@ -26,10 +27,6 @@ import { encryptId } from "@utils/common"; import { makeQueryString } from "@hooks/common/use-url-param"; import { isNumber } from "@utils/number-utils"; -export interface DefaultTick { - tickLower?: number, - tickUpper?: number -} export interface AddLiquidityPriceRage { type: PriceRangeType; apr?: string; @@ -66,9 +63,9 @@ const EarnAddLiquidityContainer: React.FC = () => { const [initialized, setInitialized] = useState(false); const [swapValue, setSwapValue] = useAtom(SwapState.swap); const { tokenA = null, tokenB = null, type = "EXACT_IN", isKeepToken = false } = swapValue; - const router = useRouter(); + const router = useRouter(); const { getGnotPath } = useGnotToGnot(); - + const tokenAAmountInput = useTokenAmountInput(tokenA); const tokenBAmountInput = useTokenAmountInput(tokenB); @@ -79,7 +76,7 @@ const EarnAddLiquidityContainer: React.FC = () => { const [defaultPrice, setDefaultPrice] = useState(null); const [priceRangeTypeFromUrl, setPriceRangeTypeFromUrl] = useState(); const [ticksFromUrl, setTickFromUrl] = useState(); - + const { openModal: openConnectWalletModal } = useConnectWalletModal(); const { @@ -91,16 +88,12 @@ const EarnAddLiquidityContainer: React.FC = () => { const { slippage, changeSlippage } = useSlippage(); const { tokens, updateTokens, updateBalances, updateTokenPrices } = useTokenData(); const [createOption, setCreateOption] = useState<{ startPrice: number | null, isCreate: boolean }>({ isCreate: false, startPrice: null }); - const selectPool = useSelectPool({ - tokenA, - tokenB, - feeTier: swapFeeTier, - isCreate: createOption?.isCreate, + const selectPool = useSelectPool({ + tokenA, + tokenB, + feeTier: swapFeeTier, + isCreate: createOption?.isCreate, startPrice: createOption?.startPrice, - // defaultPriceRange: [ - // tickLower ? tickToPrice(Number(tickLower)) : null, - // tickUpper ? tickToPrice(Number(tickUpper)) : null - // ], }); const { updatePools } = usePoolData(); const { pools, feetierOfLiquidityMap, createPool, addLiquidity, fetching } = usePool({ tokenA, tokenB, compareToken: selectPool.compareToken }); @@ -126,12 +119,6 @@ const EarnAddLiquidityContainer: React.FC = () => { addLiquidity, }); - // useEffect(() => { - // if(!initialized && router.isReady) { - - // } - // }, [initialized, router.isReady, router.query]); - const priceRangeSummary: PriceRangeSummary = useMemo(() => { let depositRatio = "-"; let feeBoost: string | null = null; @@ -341,9 +328,9 @@ const EarnAddLiquidityContainer: React.FC = () => { const query = router.query; const { tickLower, tickUpper, price_range_type } = router.query; - if(type) { + if (type) { setPriceRangeTypeFromUrl(type as PriceRangeType); - setPriceRange(PRICE_RANGES.find(item => item.type === (price_range_type ?? "Passive"))?? null); + setPriceRange(PRICE_RANGES.find(item => item.type === (price_range_type ?? "Passive")) ?? null); } setTickFromUrl({ tickLower: tickLower ? tickToPrice(Number(tickLower)) : undefined, @@ -455,7 +442,7 @@ const EarnAddLiquidityContainer: React.FC = () => { }, [selectPool.isChangeMinMax]); useEffect(() => { - selectPool.setIsChangeMinMax(priceRange?.type === "Custom"); + selectPool.setIsChangeMinMax(priceRange?.type === "Custom"); }, [priceRange?.type]); useEffect(() => { @@ -467,7 +454,7 @@ const EarnAddLiquidityContainer: React.FC = () => { if (tokenA?.path && tokenB?.path) { router.push(`/earn/pool/${router.query["pool-path"]}/add?${queryString}`, undefined, { shallow: true }); } - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectPool.minPosition, selectPool.maxPosition, priceRange?.type]); return ( diff --git a/packages/web/src/repositories/dashboard/res.ts b/packages/web/src/repositories/dashboard/res.ts deleted file mode 100644 index f8dd5adfa..000000000 --- a/packages/web/src/repositories/dashboard/res.ts +++ /dev/null @@ -1,1451 +0,0 @@ -export const res = { - "latest": "816945000.000000", - "last7d": [ - { - "date": "2024-04-26 06:00:00", - "tvlUsd": "754716000.000000" - }, - { - "date": "2024-04-26 07:00:00", - "tvlUsd": "754716000.000000" - }, - { - "date": "2024-04-26 08:00:00", - "tvlUsd": "754716000.000000" - }, - { - "date": "2024-04-26 09:00:00", - "tvlUsd": "754716000.000000" - }, - { - "date": "2024-04-26 10:00:00", - "tvlUsd": "754716000.000000" - }, - { - "date": "2024-04-26 11:00:00", - "tvlUsd": "825548000.000000" - }, - { - "date": "2024-04-26 12:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-26 13:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-26 14:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-26 15:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-26 16:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-26 17:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-26 18:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-26 19:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-26 20:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-26 21:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-26 22:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-26 23:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-27 00:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-27 01:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-27 02:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-27 03:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-27 04:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-27 05:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-27 06:00:00", - "tvlUsd": "839714000.000000" - }, - { - "date": "2024-04-27 07:00:00", - "tvlUsd": "831814000.000000" - }, - { - "date": "2024-04-27 08:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 09:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 10:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 11:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 12:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 13:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 14:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 15:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 16:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 17:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 18:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 19:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 20:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 21:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 22:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-27 23:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 00:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 01:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 02:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 03:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 04:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 05:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 06:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 07:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 08:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 09:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 10:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 11:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 12:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 13:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 14:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 15:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 16:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 17:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 18:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 19:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 20:00:00", - "tvlUsd": "816013000.000000" - }, - { - "date": "2024-04-28 21:00:00", - "tvlUsd": "816678000.000000" - }, - { - "date": "2024-04-28 22:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-28 23:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 00:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 01:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 02:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 03:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 04:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 05:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 06:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 07:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 08:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 09:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 10:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 11:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 12:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 13:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 14:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 15:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 16:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 17:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 18:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 19:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 20:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 21:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 22:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-29 23:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 00:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 01:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 02:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 03:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 04:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 05:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 06:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 07:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 08:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 09:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 10:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 11:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 12:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 13:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 14:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 15:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 16:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 17:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 18:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 19:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 20:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 21:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 22:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 23:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 00:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 01:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 02:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 03:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 04:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 05:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 06:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 07:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 08:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 09:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 10:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 11:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 12:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 13:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 14:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 15:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 16:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 17:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 18:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 19:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 20:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 21:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 22:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 23:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 00:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 01:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 02:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 03:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 04:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 05:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 06:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 07:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 08:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 09:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 10:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 11:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 12:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 13:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 14:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 15:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 16:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 17:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 18:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 19:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 20:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 21:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 22:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 23:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-03 00:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-03 01:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-03 02:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-03 03:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-03 04:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-03 05:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-03 06:00:00", - "tvlUsd": "816945000.000000" - } - ], - "last1m": [ - { - "date": "2024-04-03 0:00:00", - "tvlUsd": "729097000.000000" - }, - { - "date": "2024-04-04 0:00:00", - "tvlUsd": "729097000.000000" - }, - { - "date": "2024-04-05 0:00:00", - "tvlUsd": "729097000.000000" - }, - { - "date": "2024-04-06 0:00:00", - "tvlUsd": "729105000.000000" - }, - { - "date": "2024-04-07 0:00:00", - "tvlUsd": "728534000.000000" - }, - { - "date": "2024-04-08 0:00:00", - "tvlUsd": "725200000.000000" - }, - { - "date": "2024-04-09 0:00:00", - "tvlUsd": "725201000.000000" - }, - { - "date": "2024-04-10 0:00:00", - "tvlUsd": "773143000.000000" - }, - { - "date": "2024-04-11 0:00:00", - "tvlUsd": "865192000.000000" - }, - { - "date": "2024-04-12 0:00:00", - "tvlUsd": "865192000.000000" - }, - { - "date": "2024-04-13 0:00:00", - "tvlUsd": "865192000.000000" - }, - { - "date": "2024-04-14 0:00:00", - "tvlUsd": "865192000.000000" - }, - { - "date": "2024-04-15 0:00:00", - "tvlUsd": "865194000.000000" - }, - { - "date": "2024-04-16 0:00:00", - "tvlUsd": "865194000.000000" - }, - { - "date": "2024-04-17 0:00:00", - "tvlUsd": "865194000.000000" - }, - { - "date": "2024-04-18 0:00:00", - "tvlUsd": "859388000.000000" - }, - { - "date": "2024-04-19 0:00:00", - "tvlUsd": "844597000.000000" - }, - { - "date": "2024-04-20 0:00:00", - "tvlUsd": "833646000.000000" - }, - { - "date": "2024-04-21 0:00:00", - "tvlUsd": "833649000.000000" - }, - { - "date": "2024-04-22 0:00:00", - "tvlUsd": "833909000.000000" - }, - { - "date": "2024-04-23 0:00:00", - "tvlUsd": "750125000.000000" - }, - { - "date": "2024-04-24 0:00:00", - "tvlUsd": "738260000.000000" - }, - { - "date": "2024-04-25 0:00:00", - "tvlUsd": "746151000.000000" - }, - { - "date": "2024-04-26 0:00:00", - "tvlUsd": "800166000.000000" - }, - { - "date": "2024-04-27 0:00:00", - "tvlUsd": "823471000.000000" - }, - { - "date": "2024-04-28 0:00:00", - "tvlUsd": "816117000.000000" - }, - { - "date": "2024-04-29 0:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30 0:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01 0:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02 0:00:00", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-03 0:00:00", - "tvlUsd": "816945000.000000" - } - ], - "last1y": [ - { - "date": "2024-02-14T00:00:00Z", - "tvlUsd": "77803200000000000589171802505216.000000" - }, - { - "date": "2024-02-15T00:00:00Z", - "tvlUsd": "2259030000.000000" - }, - { - "date": "2024-02-16T00:00:00Z", - "tvlUsd": "2258180000.000000" - }, - { - "date": "2024-02-17T00:00:00Z", - "tvlUsd": "2257920000.000000" - }, - { - "date": "2024-02-18T00:00:00Z", - "tvlUsd": "2037330000.000000" - }, - { - "date": "2024-02-19T00:00:00Z", - "tvlUsd": "1635070000.000000" - }, - { - "date": "2024-02-20T00:00:00Z", - "tvlUsd": "1755880000.000000" - }, - { - "date": "2024-02-21T00:00:00Z", - "tvlUsd": "1761550000.000000" - }, - { - "date": "2024-02-22T00:00:00Z", - "tvlUsd": "1750670000.000000" - }, - { - "date": "2024-02-23T00:00:00Z", - "tvlUsd": "1743090000.000000" - }, - { - "date": "2024-02-24T00:00:00Z", - "tvlUsd": "1743090000.000000" - }, - { - "date": "2024-02-25T00:00:00Z", - "tvlUsd": "1743090000.000000" - }, - { - "date": "2024-02-26T00:00:00Z", - "tvlUsd": "1743090000.000000" - }, - { - "date": "2024-02-27T00:00:00Z", - "tvlUsd": "1370110000.000000" - }, - { - "date": "2024-02-28T00:00:00Z", - "tvlUsd": "1278770000.000000" - }, - { - "date": "2024-02-29T00:00:00Z", - "tvlUsd": "988077000.000000" - }, - { - "date": "2024-03-01T00:00:00Z", - "tvlUsd": "986846000.000000" - }, - { - "date": "2024-03-02T00:00:00Z", - "tvlUsd": "986847000.000000" - }, - { - "date": "2024-03-03T00:00:00Z", - "tvlUsd": "986775000.000000" - }, - { - "date": "2024-03-04T00:00:00Z", - "tvlUsd": "701146000.000000" - }, - { - "date": "2024-03-05T00:00:00Z", - "tvlUsd": "615695000.000000" - }, - { - "date": "2024-03-06T00:00:00Z", - "tvlUsd": "680737000.000000" - }, - { - "date": "2024-03-07T00:00:00Z", - "tvlUsd": "654814000.000000" - }, - { - "date": "2024-03-08T00:00:00Z", - "tvlUsd": "653970000.000000" - }, - { - "date": "2024-03-09T00:00:00Z", - "tvlUsd": "653970000.000000" - }, - { - "date": "2024-03-10T00:00:00Z", - "tvlUsd": "653970000.000000" - }, - { - "date": "2024-03-11T00:00:00Z", - "tvlUsd": "653970000.000000" - }, - { - "date": "2024-03-12T00:00:00Z", - "tvlUsd": "653984000.000000" - }, - { - "date": "2024-03-13T00:00:00Z", - "tvlUsd": "653990000.000000" - }, - { - "date": "2024-03-14T00:00:00Z", - "tvlUsd": "652488000.000000" - }, - { - "date": "2024-03-15T00:00:00Z", - "tvlUsd": "652396000.000000" - }, - { - "date": "2024-03-16T00:00:00Z", - "tvlUsd": "652397000.000000" - }, - { - "date": "2024-03-17T00:00:00Z", - "tvlUsd": "652399000.000000" - }, - { - "date": "2024-03-18T00:00:00Z", - "tvlUsd": "652458000.000000" - }, - { - "date": "2024-03-19T00:00:00Z", - "tvlUsd": "652497000.000000" - }, - { - "date": "2024-03-20T00:00:00Z", - "tvlUsd": "652497000.000000" - }, - { - "date": "2024-03-21T00:00:00Z", - "tvlUsd": "652497000.000000" - }, - { - "date": "2024-03-22T00:00:00Z", - "tvlUsd": "655230000.000000" - }, - { - "date": "2024-03-23T00:00:00Z", - "tvlUsd": "661307000.000000" - }, - { - "date": "2024-03-24T00:00:00Z", - "tvlUsd": "663822000.000000" - }, - { - "date": "2024-03-25T00:00:00Z", - "tvlUsd": "685136000.000000" - }, - { - "date": "2024-03-26T00:00:00Z", - "tvlUsd": "688812000.000000" - }, - { - "date": "2024-03-27T00:00:00Z", - "tvlUsd": "698258000.000000" - }, - { - "date": "2024-03-28T00:00:00Z", - "tvlUsd": "681830000.000000" - }, - { - "date": "2024-03-29T00:00:00Z", - "tvlUsd": "681830000.000000" - }, - { - "date": "2024-03-30T00:00:00Z", - "tvlUsd": "678274000.000000" - }, - { - "date": "2024-03-31T00:00:00Z", - "tvlUsd": "670448000.000000" - }, - { - "date": "2024-04-01T00:00:00Z", - "tvlUsd": "667435000.000000" - }, - { - "date": "2024-04-02T00:00:00Z", - "tvlUsd": "718183000.000000" - }, - { - "date": "2024-04-03T00:00:00Z", - "tvlUsd": "726869000.000000" - }, - { - "date": "2024-04-04T00:00:00Z", - "tvlUsd": "729097000.000000" - }, - { - "date": "2024-04-05T00:00:00Z", - "tvlUsd": "729097000.000000" - }, - { - "date": "2024-04-06T00:00:00Z", - "tvlUsd": "729105000.000000" - }, - { - "date": "2024-04-07T00:00:00Z", - "tvlUsd": "728534000.000000" - }, - { - "date": "2024-04-08T00:00:00Z", - "tvlUsd": "725200000.000000" - }, - { - "date": "2024-04-09T00:00:00Z", - "tvlUsd": "725201000.000000" - }, - { - "date": "2024-04-10T00:00:00Z", - "tvlUsd": "773143000.000000" - }, - { - "date": "2024-04-11T00:00:00Z", - "tvlUsd": "865192000.000000" - }, - { - "date": "2024-04-12T00:00:00Z", - "tvlUsd": "865192000.000000" - }, - { - "date": "2024-04-13T00:00:00Z", - "tvlUsd": "865192000.000000" - }, - { - "date": "2024-04-14T00:00:00Z", - "tvlUsd": "865192000.000000" - }, - { - "date": "2024-04-15T00:00:00Z", - "tvlUsd": "865194000.000000" - }, - { - "date": "2024-04-16T00:00:00Z", - "tvlUsd": "865194000.000000" - }, - { - "date": "2024-04-17T00:00:00Z", - "tvlUsd": "865194000.000000" - }, - { - "date": "2024-04-18T00:00:00Z", - "tvlUsd": "859388000.000000" - }, - { - "date": "2024-04-19T00:00:00Z", - "tvlUsd": "844597000.000000" - }, - { - "date": "2024-04-20T00:00:00Z", - "tvlUsd": "833646000.000000" - }, - { - "date": "2024-04-21T00:00:00Z", - "tvlUsd": "833649000.000000" - }, - { - "date": "2024-04-22T00:00:00Z", - "tvlUsd": "833909000.000000" - }, - { - "date": "2024-04-23T00:00:00Z", - "tvlUsd": "750125000.000000" - }, - { - "date": "2024-04-24T00:00:00Z", - "tvlUsd": "738260000.000000" - }, - { - "date": "2024-04-25T00:00:00Z", - "tvlUsd": "746151000.000000" - }, - { - "date": "2024-04-26T00:00:00Z", - "tvlUsd": "800166000.000000" - }, - { - "date": "2024-04-27T00:00:00Z", - "tvlUsd": "823471000.000000" - }, - { - "date": "2024-04-28T00:00:00Z", - "tvlUsd": "816117000.000000" - }, - { - "date": "2024-04-29T00:00:00Z", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30T00:00:00Z", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01T00:00:00Z", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02T00:00:00Z", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-03T00:00:00Z", - "tvlUsd": "816945000.000000" - } - ], - "all": [ - { - "date": "2024-02-14T00:00:00Z", - "tvlUsd": "77803200000000000589171802505216.000000" - }, - { - "date": "2024-02-15T00:00:00Z", - "tvlUsd": "2259030000.000000" - }, - { - "date": "2024-02-16T00:00:00Z", - "tvlUsd": "2258180000.000000" - }, - { - "date": "2024-02-17T00:00:00Z", - "tvlUsd": "2257920000.000000" - }, - { - "date": "2024-02-18T00:00:00Z", - "tvlUsd": "2037330000.000000" - }, - { - "date": "2024-02-19T00:00:00Z", - "tvlUsd": "1635070000.000000" - }, - { - "date": "2024-02-20T00:00:00Z", - "tvlUsd": "1755880000.000000" - }, - { - "date": "2024-02-21T00:00:00Z", - "tvlUsd": "1761550000.000000" - }, - { - "date": "2024-02-22T00:00:00Z", - "tvlUsd": "1750670000.000000" - }, - { - "date": "2024-02-23T00:00:00Z", - "tvlUsd": "1743090000.000000" - }, - { - "date": "2024-02-24T00:00:00Z", - "tvlUsd": "1743090000.000000" - }, - { - "date": "2024-02-25T00:00:00Z", - "tvlUsd": "1743090000.000000" - }, - { - "date": "2024-02-26T00:00:00Z", - "tvlUsd": "1743090000.000000" - }, - { - "date": "2024-02-27T00:00:00Z", - "tvlUsd": "1370110000.000000" - }, - { - "date": "2024-02-28T00:00:00Z", - "tvlUsd": "1278770000.000000" - }, - { - "date": "2024-02-29T00:00:00Z", - "tvlUsd": "988077000.000000" - }, - { - "date": "2024-03-01T00:00:00Z", - "tvlUsd": "986846000.000000" - }, - { - "date": "2024-03-02T00:00:00Z", - "tvlUsd": "986847000.000000" - }, - { - "date": "2024-03-03T00:00:00Z", - "tvlUsd": "986775000.000000" - }, - { - "date": "2024-03-04T00:00:00Z", - "tvlUsd": "701146000.000000" - }, - { - "date": "2024-03-05T00:00:00Z", - "tvlUsd": "615695000.000000" - }, - { - "date": "2024-03-06T00:00:00Z", - "tvlUsd": "680737000.000000" - }, - { - "date": "2024-03-07T00:00:00Z", - "tvlUsd": "654814000.000000" - }, - { - "date": "2024-03-08T00:00:00Z", - "tvlUsd": "653970000.000000" - }, - { - "date": "2024-03-09T00:00:00Z", - "tvlUsd": "653970000.000000" - }, - { - "date": "2024-03-10T00:00:00Z", - "tvlUsd": "653970000.000000" - }, - { - "date": "2024-03-11T00:00:00Z", - "tvlUsd": "653970000.000000" - }, - { - "date": "2024-03-12T00:00:00Z", - "tvlUsd": "653984000.000000" - }, - { - "date": "2024-03-13T00:00:00Z", - "tvlUsd": "653990000.000000" - }, - { - "date": "2024-03-14T00:00:00Z", - "tvlUsd": "652488000.000000" - }, - { - "date": "2024-03-15T00:00:00Z", - "tvlUsd": "652396000.000000" - }, - { - "date": "2024-03-16T00:00:00Z", - "tvlUsd": "652397000.000000" - }, - { - "date": "2024-03-17T00:00:00Z", - "tvlUsd": "652399000.000000" - }, - { - "date": "2024-03-18T00:00:00Z", - "tvlUsd": "652458000.000000" - }, - { - "date": "2024-03-19T00:00:00Z", - "tvlUsd": "652497000.000000" - }, - { - "date": "2024-03-20T00:00:00Z", - "tvlUsd": "652497000.000000" - }, - { - "date": "2024-03-21T00:00:00Z", - "tvlUsd": "652497000.000000" - }, - { - "date": "2024-03-22T00:00:00Z", - "tvlUsd": "655230000.000000" - }, - { - "date": "2024-03-23T00:00:00Z", - "tvlUsd": "661307000.000000" - }, - { - "date": "2024-03-24T00:00:00Z", - "tvlUsd": "663822000.000000" - }, - { - "date": "2024-03-25T00:00:00Z", - "tvlUsd": "685136000.000000" - }, - { - "date": "2024-03-26T00:00:00Z", - "tvlUsd": "688812000.000000" - }, - { - "date": "2024-03-27T00:00:00Z", - "tvlUsd": "698258000.000000" - }, - { - "date": "2024-03-28T00:00:00Z", - "tvlUsd": "681830000.000000" - }, - { - "date": "2024-03-29T00:00:00Z", - "tvlUsd": "681830000.000000" - }, - { - "date": "2024-03-30T00:00:00Z", - "tvlUsd": "678274000.000000" - }, - { - "date": "2024-03-31T00:00:00Z", - "tvlUsd": "670448000.000000" - }, - { - "date": "2024-04-01T00:00:00Z", - "tvlUsd": "667435000.000000" - }, - { - "date": "2024-04-02T00:00:00Z", - "tvlUsd": "718183000.000000" - }, - { - "date": "2024-04-03T00:00:00Z", - "tvlUsd": "726869000.000000" - }, - { - "date": "2024-04-04T00:00:00Z", - "tvlUsd": "729097000.000000" - }, - { - "date": "2024-04-05T00:00:00Z", - "tvlUsd": "729097000.000000" - }, - { - "date": "2024-04-06T00:00:00Z", - "tvlUsd": "729105000.000000" - }, - { - "date": "2024-04-07T00:00:00Z", - "tvlUsd": "728534000.000000" - }, - { - "date": "2024-04-08T00:00:00Z", - "tvlUsd": "725200000.000000" - }, - { - "date": "2024-04-09T00:00:00Z", - "tvlUsd": "725201000.000000" - }, - { - "date": "2024-04-10T00:00:00Z", - "tvlUsd": "773143000.000000" - }, - { - "date": "2024-04-11T00:00:00Z", - "tvlUsd": "865192000.000000" - }, - { - "date": "2024-04-12T00:00:00Z", - "tvlUsd": "865192000.000000" - }, - { - "date": "2024-04-13T00:00:00Z", - "tvlUsd": "865192000.000000" - }, - { - "date": "2024-04-14T00:00:00Z", - "tvlUsd": "865192000.000000" - }, - { - "date": "2024-04-15T00:00:00Z", - "tvlUsd": "865194000.000000" - }, - { - "date": "2024-04-16T00:00:00Z", - "tvlUsd": "865194000.000000" - }, - { - "date": "2024-04-17T00:00:00Z", - "tvlUsd": "865194000.000000" - }, - { - "date": "2024-04-18T00:00:00Z", - "tvlUsd": "859388000.000000" - }, - { - "date": "2024-04-19T00:00:00Z", - "tvlUsd": "844597000.000000" - }, - { - "date": "2024-04-20T00:00:00Z", - "tvlUsd": "833646000.000000" - }, - { - "date": "2024-04-21T00:00:00Z", - "tvlUsd": "833649000.000000" - }, - { - "date": "2024-04-22T00:00:00Z", - "tvlUsd": "833909000.000000" - }, - { - "date": "2024-04-23T00:00:00Z", - "tvlUsd": "750125000.000000" - }, - { - "date": "2024-04-24T00:00:00Z", - "tvlUsd": "738260000.000000" - }, - { - "date": "2024-04-25T00:00:00Z", - "tvlUsd": "746151000.000000" - }, - { - "date": "2024-04-26T00:00:00Z", - "tvlUsd": "800166000.000000" - }, - { - "date": "2024-04-27T00:00:00Z", - "tvlUsd": "823471000.000000" - }, - { - "date": "2024-04-28T00:00:00Z", - "tvlUsd": "816117000.000000" - }, - { - "date": "2024-04-29T00:00:00Z", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-04-30T00:00:00Z", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-01T00:00:00Z", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-02T00:00:00Z", - "tvlUsd": "816945000.000000" - }, - { - "date": "2024-05-03T00:00:00Z", - "tvlUsd": "816945000.000000" - } - ] -}; \ No newline at end of file diff --git a/packages/web/src/utils/stake-position-utils.ts b/packages/web/src/utils/stake-position-utils.ts index 73ba6751b..6755e4f3a 100644 --- a/packages/web/src/utils/stake-position-utils.ts +++ b/packages/web/src/utils/stake-position-utils.ts @@ -62,8 +62,6 @@ export const convertToKMB = ( maximumFractionDigits: options?.maximumFractionDigits, minimumFractionDigits: options?.minimumFractionDigits, })); - console.log("🚀 ~ result ~ result:", result); - return result; } else { From d979a7f463267418a4d507a22726a6a6a12745f2 Mon Sep 17 00:00:00 2001 From: phuc-varmeta Date: Tue, 7 May 2024 13:51:06 +0700 Subject: [PATCH 37/37] chore: fix compile error --- .../common/select-price-range/SelectPriceRange.tsx | 7 +++---- .../earn-add/earn-add-liquidity/EarnAddLiquidity.tsx | 7 +++---- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx b/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx index b85374127..9e06e1d8c 100644 --- a/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx +++ b/packages/web/src/components/common/select-price-range/SelectPriceRange.tsx @@ -1,4 +1,4 @@ -import { PriceRangeStr, PriceRangeTooltip, PriceRangeType } from "@constants/option.constant"; +import { DefaultTick, PriceRangeStr, PriceRangeTooltip, PriceRangeType } from "@constants/option.constant"; import React, { useCallback, useMemo, useRef } from "react"; import IconInfo from "@components/common/icons/IconInfo"; import IconStrokeArrowRight from "@components/common/icons/IconStrokeArrowRight"; @@ -8,7 +8,6 @@ import { AddLiquidityPriceRage } from "@containers/earn-add-liquidity-container/ import SelectPriceRangeCustom from "../select-price-range-custom/SelectPriceRangeCustom"; import { TokenModel } from "@models/token/token-model"; import { SelectPool } from "@hooks/pool/use-select-pool"; -import { DefaultTick } from "@containers/pool-add-liquidity-container/PoolAddLiquidityContainer"; interface SelectPriceRangeProps { opened: boolean; @@ -48,7 +47,7 @@ const SelectPriceRange: React.FC = ({ resetPriceRangeTypeTarget, defaultTicks, }) => { - const selectPriceRangeRef= useRef>(null); + const selectPriceRangeRef = useRef>(null); const selectedTokenPair = true; const changePriceRangeWithClear = useCallback((priceRange: AddLiquidityPriceRage) => { @@ -107,7 +106,7 @@ export const SelectPriceRangeItem: React.FC = ({ changePriceRange, priceRangeStr, }) => { - + const aprStr = useMemo(() => { const apr = priceRange.apr; if (apr) { diff --git a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx index da73307e7..b4c7504fa 100644 --- a/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx +++ b/packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx @@ -2,7 +2,7 @@ import Button, { ButtonHierarchy } from "@components/common/button/Button"; import SelectFeeTier from "@components/common/select-fee-tier/SelectFeeTier"; import React, { useCallback, useMemo, useState, useEffect } from "react"; import { EarnAddLiquidityWrapper, OutOfRangeWrapper } from "./EarnAddLiquidity.styles"; -import { AddLiquidityType, SwapFeeTierType, SwapFeeTierInfoMap, AddLiquiditySubmitType, PriceRangeType } from "@constants/option.constant"; +import { AddLiquidityType, SwapFeeTierType, SwapFeeTierInfoMap, AddLiquiditySubmitType, PriceRangeType, DefaultTick } from "@constants/option.constant"; import { AddLiquidityPriceRage, PoolTick, PriceRangeSummary } from "@containers/earn-add-liquidity-container/EarnAddLiquidityContainer"; import LiquidityEnterAmounts from "@components/common/liquidity-enter-amounts/LiquidityEnterAmounts"; import SelectPair from "@components/common/select-pair/SelectPair"; @@ -22,7 +22,6 @@ import { SelectPool } from "@hooks/pool/use-select-pool"; import IconFailed from "@components/common/icons/IconFailed"; import { isEmptyObject } from "@utils/validation-utils"; import { useLoading } from "@hooks/common/use-loading"; -import { DefaultTick } from "@containers/pool-add-liquidity-container/PoolAddLiquidityContainer"; interface EarnAddLiquidityProps { mode: AddLiquidityType; @@ -232,10 +231,10 @@ const EarnAddLiquidity: React.FC = ({ if (!tokenA || !tokenB) return false; const { minPrice, maxPrice, currentPrice } = selectPool; - return ((minPrice || 0) > (currentPrice || 0) && (maxPrice || 0) > (currentPrice || 0)) || ((minPrice || 0) < (currentPrice || 0) && (maxPrice || 0) < (currentPrice || 0)); + return ((minPrice || 0) > (currentPrice || 0) && (maxPrice || 0) > (currentPrice || 0)) || ((minPrice || 0) < (currentPrice || 0) && (maxPrice || 0) < (currentPrice || 0)); }, [selectPool, tokenA, tokenB]); const isLoading = useMemo(() => selectPool.renderState() === "LOADING" || isLoadingCommon, [selectPool.renderState, isLoadingCommon]); - + return (

Add Position