diff --git a/packages/web/src/common/clients/wallet-client/transaction-messages/position.ts b/packages/web/src/common/clients/wallet-client/transaction-messages/position.ts index fda278412..49cf051fd 100644 --- a/packages/web/src/common/clients/wallet-client/transaction-messages/position.ts +++ b/packages/web/src/common/clients/wallet-client/transaction-messages/position.ts @@ -113,6 +113,32 @@ export function makePositionIncreaseLiquidityMessage( }); } +export function makePositionRepositionLiquidityMessage( + lpTokenId: string, + minTick: number, + maxTick: number, + tokenAAmount: string, + tokenBAmount: string, + caller: string, + sendAmount: string | null, +) { + const send = makeGNOTSendAmount(sendAmount); + + return makeTransactionMessage({ + send, + func: "Reposition", + packagePath: PACKAGE_POSITION_PATH, + args: [ + lpTokenId, // LP Token ID + `${minTick}`, // position's minimal tick + `${maxTick}`, // position's maximal tick + `${tokenAAmount}`, // Maximum amount of tokenB to offer + `${tokenBAmount}`, // Maximum amount of tokenA to offer + ], + caller, + }); +} + export function makePositionDecreaseLiquidityMessage( lpTokenId: string, liquidityRatio: number, diff --git a/packages/web/src/components/common/error-boundary/ErrorBoundary.tsx b/packages/web/src/components/common/error-boundary/ErrorBoundary.tsx index c20ae068e..5ee0d21d5 100644 --- a/packages/web/src/components/common/error-boundary/ErrorBoundary.tsx +++ b/packages/web/src/components/common/error-boundary/ErrorBoundary.tsx @@ -23,7 +23,8 @@ class ErrorBoundary extends Component { this.state = { hasError: false }; } - componentDidCatch() { + componentDidCatch(e: any) { + console.log(e); this.setState({ hasError: true }); } diff --git a/packages/web/src/components/common/reposition-modal/RepositionModal.tsx b/packages/web/src/components/common/reposition-modal/RepositionModal.tsx index df95c60de..9f76dfa28 100644 --- a/packages/web/src/components/common/reposition-modal/RepositionModal.tsx +++ b/packages/web/src/components/common/reposition-modal/RepositionModal.tsx @@ -6,10 +6,6 @@ import RepositionInfo from "@components/reposition/reposition-info/RepositionInf import { RANGE_STATUS_OPTION } from "@constants/option.constant"; import { IPriceRange } from "@hooks/increase/use-increase-handle"; import { TokenModel } from "@models/token/token-model"; -import { - AddLiquidityFailedResponse, - AddLiquiditySuccessResponse, -} from "@repositories/pool/response/add-liquidity-response"; import { SwapRouteFailedResponse, SwapRouteSuccessResponse, @@ -18,6 +14,10 @@ import React, { useCallback, useState } from "react"; import Button, { ButtonHierarchy } from "../button/Button"; import IconClose from "../icons/IconCancel"; import { RepositionModalWrapper } from "./RepositionModal.styles"; +import { + RepositionLiquidityFailedResponse, + RepositionLiquiditySuccessResponse, +} from "@repositories/position/response"; interface Props { close: () => void; @@ -45,12 +45,13 @@ interface Props { swapRemainToken: () => Promise | null>; - addPosition: ( - swapToken: TokenModel, - swapAmount: string, + reposition: ( + swapToken: TokenModel | null, + swapAmount: string | null, ) => Promise | null>; + isSkipSwap: boolean; } const RepositionModal: React.FC = ({ @@ -65,7 +66,8 @@ const RepositionModal: React.FC = ({ repositionAmounts, removePosition, swapRemainToken, - addPosition, + reposition, + isSkipSwap, }) => { const [confirm, setConfirm] = useState(false); @@ -113,10 +115,12 @@ const RepositionModal: React.FC = ({ ) : ( 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 ce749adfb..fcfd70fa0 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 @@ -33,6 +33,7 @@ export interface SelectPriceRangeCustomProps { showDim: boolean; defaultPrice: number | null; handleSwapValue: () => void; + resetRange?: () => void; isEmptyLiquidity: boolean; isKeepToken: boolean; } @@ -43,6 +44,7 @@ const SelectPriceRangeCustom: React.FC = ({ priceRangeType, selectPool, showDim, + resetRange, handleSwapValue, isKeepToken, }) => { @@ -234,7 +236,11 @@ const SelectPriceRangeCustom: React.FC = ({ } } - function resetRange(priceRangeType?: PriceRangeType | null) { + function onResetRange(priceRangeType?: PriceRangeType | null) { + if (resetRange) { + resetRange(); + return; + } selectPool.resetRange(); setShiftPosition(0); initPriceRange(priceRangeType); @@ -259,7 +265,7 @@ const SelectPriceRangeCustom: React.FC = ({ }, [tokenA]); useEffect(() => { - resetRange(priceRangeType); + onResetRange(priceRangeType); }, [ selectPool.poolPath, selectPool.feeTier, @@ -430,7 +436,7 @@ const SelectPriceRangeCustom: React.FC = ({
resetRange()} + onClick={() => onResetRange()} > Reset Range diff --git a/packages/web/src/components/common/select-price-range-reposition/SelectPriceRangeReposition.tsx b/packages/web/src/components/common/select-price-range-reposition/SelectPriceRangeReposition.tsx index 6ad031a90..649a96905 100644 --- a/packages/web/src/components/common/select-price-range-reposition/SelectPriceRangeReposition.tsx +++ b/packages/web/src/components/common/select-price-range-reposition/SelectPriceRangeReposition.tsx @@ -25,6 +25,7 @@ interface SelectPriceRangeProps { showDim: boolean; defaultPrice: number | null; handleSwapValue: () => void; + resetRange: () => void; isEmptyLiquidity: boolean; isKeepToken: boolean; } @@ -41,6 +42,7 @@ const SelectPriceRangeReposition: React.FC = ({ showDim, defaultPrice, handleSwapValue, + resetRange, isEmptyLiquidity, isKeepToken, }) => { @@ -78,6 +80,7 @@ const SelectPriceRangeReposition: React.FC = ({ priceRangeType={priceRange?.type || null} showDim={showDim} defaultPrice={defaultPrice} + resetRange={resetRange} handleSwapValue={handleSwapValue} isEmptyLiquidity={isEmptyLiquidity} isKeepToken={isKeepToken} diff --git a/packages/web/src/components/reposition/reposition-broadcast-progress/RepositionBroadcastProgress.tsx b/packages/web/src/components/reposition/reposition-broadcast-progress/RepositionBroadcastProgress.tsx index d3229cd12..968fdb058 100644 --- a/packages/web/src/components/reposition/reposition-broadcast-progress/RepositionBroadcastProgress.tsx +++ b/packages/web/src/components/reposition/reposition-broadcast-progress/RepositionBroadcastProgress.tsx @@ -12,42 +12,47 @@ import { SwapRouteFailedResponse, SwapRouteSuccessResponse, } from "@repositories/swap/response/swap-route-response"; -import { - AddLiquidityFailedResponse, - AddLiquiditySuccessResponse, -} from "@repositories/pool/response/add-liquidity-response"; import { TokenModel } from "@models/token/token-model"; +import { + RepositionLiquidityFailedResponse, + RepositionLiquiditySuccessResponse, +} from "@repositories/position/response"; export interface RepositionBroadcastProgressProps { tokenA: TokenModel; tokenB: TokenModel; + currentAmounts: { amountA: string; amountB: string } | null; removePosition: () => Promise; swapRemainToken: () => Promise | null>; - addPosition: ( - swapToken: TokenModel, - swapAmount: string, + reposition: ( + swapToken: TokenModel | null, + swapAmount: string | null, ) => Promise | null>; closeModal: () => void; + isSkipSwap: boolean; } const RepositionBroadcastProgress: React.FC< RepositionBroadcastProgressProps > = ({ removePosition, - addPosition, + reposition, swapRemainToken, closeModal, tokenA, tokenB, + isSkipSwap, }) => { const [removePositionState, setRemovePositionState] = useState("NONE"); const [swapState, setSwapState] = useState("NONE"); - const [swapResult, setSwapResult] = useState(null); + const [swapResult, setSwapResult] = useState( + null, + ); const [addPositionState, setAddPositionState] = useState("NONE"); @@ -136,46 +141,51 @@ const RepositionBroadcastProgress: React.FC< setAddPositionState("WAIT"); - if (!swapResult) { + if (!isSkipSwap && !swapResult) { wait(async () => true, 500).then(() => { setAddPositionState("INIT"); }); return; } - addPosition(swapResult.resultToken, swapResult.resultAmount).then( - response => { - if (!response) { - setAddPositionState("FAIL"); - return; - } + reposition( + swapResult?.resultToken || null, + swapResult?.resultAmount || null, + ).then(response => { + if (!response) { + setAddPositionState("FAIL"); + return; + } - if (response.code === 4000) { - setAddPositionState("REJECTED"); - return; - } + if (response.code === 4000) { + setAddPositionState("REJECTED"); + return; + } - if (response.code !== 0 || response.data === null) { - setAddPositionState("FAIL"); - return; - } + if (response.code !== 0 || response.data === null) { + setAddPositionState("FAIL"); + return; + } - setAddPositionState("BROADCAST"); - wait(async () => true, 1000).then(() => { - setAddPositionState("SUCCESS"); - callback(); - }); - }, - ); + setAddPositionState("BROADCAST"); + wait(async () => true, 1000).then(() => { + setAddPositionState("SUCCESS"); + callback(); + }); + }); }; useEffect(() => { if (removePositionState === "INIT") { processRemovePosition(() => { - setSwapState("INIT"); + if (isSkipSwap) { + setAddPositionState("INIT"); + } else { + setSwapState("INIT"); + } }); } - }, [removePositionState]); + }, [removePositionState, isSkipSwap]); useEffect(() => { if (swapState === "INIT") { @@ -218,26 +228,29 @@ const RepositionBroadcastProgress: React.FC<
-
-
- - - Swap {tokenA.symbol} for {tokenB.symbol} - -
- setSwapState("INIT")} - exit={closeModal} - /> -
- -
+ {!isSkipSwap && ( + +
+
+ + + Swap {tokenA.symbol} for {tokenB.symbol} + +
+ setSwapState("INIT")} + exit={closeModal} + /> +
+
+ + )}
diff --git a/packages/web/src/components/reposition/reposition-content/RepositionContent.tsx b/packages/web/src/components/reposition/reposition-content/RepositionContent.tsx index 65d11d35e..1cbafca41 100644 --- a/packages/web/src/components/reposition/reposition-content/RepositionContent.tsx +++ b/packages/web/src/components/reposition/reposition-content/RepositionContent.tsx @@ -3,20 +3,18 @@ import IconInfo from "@components/common/icons/IconInfo"; import Tooltip from "@components/common/tooltip/Tooltip"; import { RANGE_STATUS_OPTION } from "@constants/option.constant"; import { AddLiquidityPriceRage } from "@containers/earn-add-liquidity-container/EarnAddLiquidityContainer"; -import { - INCREASE_BUTTON_TYPE, - IPriceRange, -} from "@hooks/increase/use-increase-handle"; +import { IPriceRange } from "@hooks/increase/use-increase-handle"; import { SelectPool } from "@hooks/pool/use-select-pool"; import { TokenAmountInputModel } from "@hooks/token/use-token-amount-input"; import { PoolPositionModel } from "@models/position/pool-position-model"; import { TokenModel } from "@models/token/token-model"; -import React from "react"; +import React, { useMemo } from "react"; import BalanceChange from "../balance-change/BalanceChange"; import RepositionSelectPosition from "../reposition-select-position/RepositionSelectPosition"; import RepositionSelectRange from "../reposition-select-range/RepositionSelectRange"; import { ToolTipContentWrapper } from "../reposition-select-range/RepositionSelectRange.styles"; import { RepositionContentWrapper } from "./RepositionContent.styles"; +import { REPOSITION_BUTTON_TYPE } from "@hooks/reposition/use-reposition-handle"; interface RepositionContentProps { tokenA: TokenModel | null; @@ -34,16 +32,18 @@ interface RepositionContentProps { changeTokenBAmount: (amount: string) => void; slippage: number; changeSlippage: (value: number) => void; - buttonType: INCREASE_BUTTON_TYPE; + buttonType: REPOSITION_BUTTON_TYPE; onSubmit: () => void; selectPool: SelectPool; priceRanges: AddLiquidityPriceRage[]; priceRange: AddLiquidityPriceRage; changePriceRange: (priceRange: AddLiquidityPriceRage) => void; + resetRange: () => void; currentAmounts: { amountA: string; amountB: string } | null; repositionAmounts: { amountA: string | null; amountB: string | null } | null; selectedPosition: PoolPositionModel | null; isLoadingPosition: boolean; + isSkipSwap: boolean; } const RepositionContent: React.FC = ({ @@ -60,11 +60,31 @@ const RepositionContent: React.FC = ({ priceRange, priceRanges, changePriceRange, + resetRange, currentAmounts, repositionAmounts, selectedPosition, isLoadingPosition, + buttonType, + isSkipSwap, }) => { + const submitButtonText = useMemo(() => { + if (buttonType === "INSUFFICIENT_LIQUIDITY") { + return "Insufficient Liquidity"; + } + if (buttonType === "NON_SELECTED_RANGE") { + return "Select Range"; + } + return "Reposition"; + }, [buttonType]); + + const isSubmit = useMemo(() => { + if (buttonType === "LOADING" && isSkipSwap) { + return true; + } + return buttonType === "REPOSITION"; + }, [buttonType, isSkipSwap]); + return (
@@ -110,6 +130,7 @@ const RepositionContent: React.FC = ({ priceRanges={priceRanges} priceRange={priceRange} changePriceRange={changePriceRange} + resetRange={resetRange} isLoadingPosition={isLoadingPosition} /> @@ -128,11 +149,12 @@ const RepositionContent: React.FC = ({