feat: add a reposition contract function on reposition

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: (
+ reposition: (
  swapToken: TokenModel,
  swapAmount: string,
  ) => 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,11 @@ const RepositionModal: React.FC<Props> = ({
  <RepositionBroadcastProgress
  removePosition={removePosition}
  swapRemainToken={swapRemainToken}
- addPosition={addPosition}
+ reposition={reposition}
  closeModal={close}
  tokenA={amountInfo.tokenA.info}
  tokenB={amountInfo.tokenB.info}
+ isSkipSwap={isSkipSwap}
  />
  </React.Fragment>
  ) : (

packages/web/src/components/reposition/reposition-broadcast-progress/RepositionBroadcastProgress.tsx

@@ -12,11 +12,11 @@ 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;
@@ -25,36 +25,44 @@ export interface RepositionBroadcastProgressProps {
  swapRemainToken: () => Promise<WalletResponse<
  SwapRouteSuccessResponse | SwapRouteFailedResponse
  > | null>;
- addPosition: (
+ reposition: (
  swapToken: TokenModel,
  swapAmount: string,
  ) => 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");
 
  const isActive = useCallback((state: ProgressStateType) => {
  return !["NONE", "INIT"].includes(state);
  }, []);
 
+ useEffect(() => {
+ console.log("isSkipSwap", isSkipSwap);
+ }, [isSkipSwap]);
+
  const makeActiveClassName = useCallback(
  (className: string, active: boolean) => {
  if (!active) {
@@ -143,7 +151,7 @@ const RepositionBroadcastProgress: React.FC<
  return;
  }
 
- addPosition(swapResult.resultToken, swapResult.resultAmount).then(
+ reposition(swapResult.resultToken, swapResult.resultAmount).then(
  response => {
  if (!response) {
  setAddPositionState("FAIL");
@@ -172,10 +180,15 @@ const RepositionBroadcastProgress: React.FC<
  useEffect(() => {
  if (removePositionState === "INIT") {
  processRemovePosition(() => {
- setSwapState("INIT");
+ if (isSkipSwap) {
+ setSwapState("SUCCESS");
+ setAddPositionState("INIT");
+ } else {
+ setSwapState("INIT");
+ }
  });
  }
- }, [removePositionState]);
+ }, [removePositionState, isSkipSwap]);
 
  useEffect(() => {
  if (swapState === "INIT") {
@@ -218,26 +231,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">

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,7 +32,7 @@ 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[];
@@ -44,6 +42,7 @@ interface RepositionContentProps {
  repositionAmounts: { amountA: string | null; amountB: string | null } | null;
  selectedPosition: PoolPositionModel | null;
  isLoadingPosition: boolean;
+ isSkipSwap: boolean;
 }
 
 const RepositionContent: React.FC<RepositionContentProps> = ({
@@ -64,7 +63,26 @@ const RepositionContent: React.FC<RepositionContentProps> = ({
  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 (
  <RepositionContentWrapper>
  <div className="resposition-content-header">
@@ -128,11 +146,12 @@ const RepositionContent: React.FC<RepositionContentProps> = ({
 
  <Button
  onClick={onSubmit}
- text="Reposition"
+ text={submitButtonText}
  style={{
- hierarchy: ButtonHierarchy.Primary,
+ hierarchy: isSubmit ? ButtonHierarchy.Primary : ButtonHierarchy.Gray,
  fullWidth: true,
  }}
+ disabled={!isSubmit}
  className="button-confirm"
  />
  </RepositionContentWrapper>

packages/web/src/containers/reposition-container/RepositionContainer.tsx

@@ -37,9 +37,10 @@ const RepositionContainer: React.FC = () => {
  repositionAmounts,
  removePosition,
  swapRemainToken,
- addPosition,
+ reposition,
  selectedPosition,
  isLoadingPosition,
+ isSkipSwap,
  } = useRepositionHandle();
 
  const { openModal } = useRepositionModalContainer({
@@ -57,11 +58,17 @@ const RepositionContainer: React.FC = () => {
  repositionAmounts,
  removePosition,
  swapRemainToken,
- addPosition,
+ reposition,
+ isSkipSwap,
  });
 
  const onSubmit = () => {
- openModal();
+ if (
+ buttonType === "REPOSITION" ||
+ (buttonType === "LOADING" && isSkipSwap)
+ ) {
+ openModal();
+ }
  };
 
  return (
@@ -91,6 +98,7 @@ const RepositionContainer: React.FC = () => {
  repositionAmounts={repositionAmounts}
  selectedPosition={selectedPosition}
  isLoadingPosition={isLoadingPosition}
+ isSkipSwap={isSkipSwap}
  />
  );
 };