feat: add a reposition contract function on reposition (#427)

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,

packages/web/src/components/common/error-boundary/ErrorBoundary.tsx

@@ -23,7 +23,8 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
     this.state = { hasError: false };
   }
 
-  componentDidCatch() {
+  componentDidCatch(e: any) {
+    console.log(e);
     this.setState({ hasError: true });
   }
 

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<WalletResponse<
     SwapRouteSuccessResponse | SwapRouteFailedResponse
   > | null>;
-  addPosition: (
-    swapToken: TokenModel,
-    swapAmount: string,
+  reposition: (
+    swapToken: TokenModel | null,
+    swapAmount: string | null,
   ) => Promise<WalletResponse<
-    AddLiquiditySuccessResponse | AddLiquidityFailedResponse
+    RepositionLiquiditySuccessResponse | RepositionLiquidityFailedResponse
   > | null>;
+  isSkipSwap: boolean;
 }
 
 const RepositionModal: React.FC<Props> = ({
@@ -65,7 +66,8 @@ const RepositionModal: React.FC<Props> = ({
   repositionAmounts,
   removePosition,
   swapRemainToken,
-  addPosition,
+  reposition,
+  isSkipSwap,
 }) => {
   const [confirm, setConfirm] = useState(false);
 
@@ -113,10 +115,12 @@ const RepositionModal: React.FC<Props> = ({
               <RepositionBroadcastProgress
                 removePosition={removePosition}
                 swapRemainToken={swapRemainToken}
-                addPosition={addPosition}
+                reposition={reposition}
                 closeModal={close}
+                currentAmounts={currentAmounts}
                 tokenA={amountInfo.tokenA.info}
                 tokenB={amountInfo.tokenB.info}
+                isSkipSwap={isSkipSwap}
               />
             </React.Fragment>
           ) : (

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<SelectPriceRangeCustomProps> = ({
   priceRangeType,
   selectPool,
   showDim,
+  resetRange,
   handleSwapValue,
   isKeepToken,
 }) => {
@@ -234,7 +236,11 @@ const SelectPriceRangeCustom: React.FC<SelectPriceRangeCustomProps> = ({
     }
   }
 
-  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<SelectPriceRangeCustomProps> = ({
   }, [tokenA]);
 
   useEffect(() => {
-    resetRange(priceRangeType);
+    onResetRange(priceRangeType);
   }, [
     selectPool.poolPath,
     selectPool.feeTier,
@@ -430,7 +436,7 @@ const SelectPriceRangeCustom: React.FC<SelectPriceRangeCustomProps> = ({
                   <div className="extra-wrapper">
                     <div
                       className="icon-button reset"
-                      onClick={() => resetRange()}
+                      onClick={() => onResetRange()}
                     >
                       <IconRefresh />
                       <span>Reset Range</span>

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<SelectPriceRangeProps> = ({
   showDim,
   defaultPrice,
   handleSwapValue,
+  resetRange,
   isEmptyLiquidity,
   isKeepToken,
 }) => {
@@ -78,6 +80,7 @@ const SelectPriceRangeReposition: React.FC<SelectPriceRangeProps> = ({
           priceRangeType={priceRange?.type || null}
           showDim={showDim}
           defaultPrice={defaultPrice}
+          resetRange={resetRange}
           handleSwapValue={handleSwapValue}
           isEmptyLiquidity={isEmptyLiquidity}
           isKeepToken={isKeepToken}

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<WalletResponse | null>;
   swapRemainToken: () => Promise<WalletResponse<
     SwapRouteSuccessResponse | SwapRouteFailedResponse
   > | null>;
-  addPosition: (
-    swapToken: TokenModel,
-    swapAmount: string,
+  reposition: (
+    swapToken: TokenModel | null,
+    swapAmount: string | null,
   ) => Promise<WalletResponse<
-    AddLiquiditySuccessResponse | AddLiquidityFailedResponse
+    RepositionLiquiditySuccessResponse | RepositionLiquidityFailedResponse
   > | null>;
   closeModal: () => void;
+  isSkipSwap: boolean;
 }
 
 const RepositionBroadcastProgress: React.FC<
   RepositionBroadcastProgressProps
 > = ({
   removePosition,
-  addPosition,
+  reposition,
   swapRemainToken,
   closeModal,
   tokenA,
   tokenB,
+  isSkipSwap,
 }) => {
   const [removePositionState, setRemovePositionState] =
     useState<ProgressStateType>("NONE");
   const [swapState, setSwapState] = useState<ProgressStateType>("NONE");
-  const [swapResult, setSwapResult] = useState<SwapRouteSuccessResponse | null>(null);
+  const [swapResult, setSwapResult] = useState<SwapRouteSuccessResponse | null>(
+    null,
+  );
   const [addPositionState, setAddPositionState] =
     useState<ProgressStateType>("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<
 
       <div className="divider" />
 
-      <div className="row">
-        <div className="progress-info">
-          <IconSwapCircle active={isActive(swapState)} />
-          <span
-            className={makeActiveClassName(
-              "progress-title",
-              isActive(swapState),
-            )}
-          >
-            Swap {tokenA.symbol} for {tokenB.symbol}
-          </span>
-        </div>
-        <RepositionBroadcastProgressState
-          state={swapState}
-          retry={() => setSwapState("INIT")}
-          exit={closeModal}
-        />
-      </div>
-
-      <div className="divider" />
+      {!isSkipSwap && (
+        <React.Fragment>
+          <div className="row">
+            <div className="progress-info">
+              <IconSwapCircle active={isActive(swapState)} />
+              <span
+                className={makeActiveClassName(
+                  "progress-title",
+                  isActive(swapState),
+                )}
+              >
+                Swap {tokenA.symbol} for {tokenB.symbol}
+              </span>
+            </div>
+            <RepositionBroadcastProgressState
+              state={swapState}
+              retry={() => setSwapState("INIT")}
+              exit={closeModal}
+            />
+          </div>
+          <div className="divider" />
+        </React.Fragment>
+      )}
 
       <div className="row">
         <div className="progress-info">