SOV-4179: Repositioning out of range, add single sided liquidity (#932)

* chore: remove deprecated props

* chore: fix UI bug (change precs from 9 to 6)

* chore: update bob mm context

* chore: update onComplete func to reset all values

* chore: add single-asset deposit only

* Create three-oranges-hear.md

* chore: updates from comments

* chore: update unbalanced price change

* chore: fix partial withdraw

* chore: update prices

* chore: update price renderer

* chore: update prices renderer

* chore: repositioning out of range

* Create hot-dancers-knock.md

* chore: update prices + partial withdraw

* chore: updates from comments

* rebuild

* Revert "rebuild"

This reverts commit 0b24033.

* chore: fix balance issue

* chore: fix failed transactions

* chore: fix authentication needed: password or unlock error

* fix: balance change on ambient history table

* trigger rebuild

---------

Co-authored-by: Rick <peymannaderi3@gmail.com>

Author: pietro-maximoff

.changeset/hot-dancers-knock.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-4179: Repositioning out of range

.changeset/three-oranges-hear.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-4162: Unbalanced single sided ranged liquidity deposits

apps/frontend/src/app/3_organisms/EarnHistoryFrame/components/AmbientMarketMakingHistoryFrame/components/BalanceChange.tsx

@@ -28,8 +28,14 @@ export const BalanceChange: React.FC<BalanceChangeProps> = ({
           ).toString(),
           baseToken?.decimals,
         ).toString()}
+        prefix={
+          Number(liquidityChange.baseFlow) === 0
+            ? ''
+            : liquidityChange.changeType === 'mint'
+            ? '+'
+            : '-'
+        }
         suffix={getTokenDisplayName(baseToken?.symbol || '')}
-        prefix={liquidityChange.changeType === 'mint' ? '+' : '-'}
       />
 
       <AmountRenderer
@@ -41,7 +47,13 @@ export const BalanceChange: React.FC<BalanceChangeProps> = ({
           quoteToken?.decimals,
         ).toString()}
         suffix={getTokenDisplayName(quoteToken?.symbol || '')}
-        prefix={liquidityChange.changeType === 'mint' ? '+' : '-'}
+        prefix={
+          Number(liquidityChange.quoteFlow) === 0
+            ? ''
+            : liquidityChange.changeType === 'mint'
+            ? '+'
+            : '-'
+        }
       />
     </div>
   );

apps/frontend/src/app/5_pages/MarketMakingPage/MarketMakingPage.types.ts

@@ -1,4 +1,3 @@
-import { SupportedTokens } from '@sovryn/contracts';
 import { Decimal } from '@sovryn/utils';
 
 import { AmmLiquidityPool } from './utils/AmmLiquidityPool';
@@ -34,8 +33,8 @@ export type PromotionData = {
   rewardAmount: number;
   type: 'AMM' | 'LENDING';
   poolTokenA: string;
-  asset1: SupportedTokens;
-  asset2: SupportedTokens;
+  asset1: string;
+  asset2: string;
   linkAsset?: string;
   ammData: AmmHistory;
   apy: string;

apps/frontend/src/app/5_pages/MarketMakingPage/MarketMakingPage.utils.ts

@@ -1,12 +1,10 @@
-import { SupportedTokens } from '@sovryn/contracts';
-
 import { AmmHistory } from './MarketMakingPage.types';
 import { AmmLiquidityPoolDictionary } from './utils/AmmLiquidityPoolDictionary';
 
 export const getAmmHistory = (
   ammData: any,
-  asset1: SupportedTokens,
-  asset2: SupportedTokens,
+  asset1: string,
+  asset2: string,
 ): AmmHistory =>
   ammData &&
   ammData[

apps/frontend/src/app/5_pages/MarketMakingPage/components/AdjustAndDepositModal/components/NewPoolStatistics/NewPoolStatistics.tsx

@@ -3,7 +3,6 @@ import React, { FC, useMemo } from 'react';
 import classNames from 'classnames';
 import { t } from 'i18next';
 
-import { SupportedTokens } from '@sovryn/contracts';
 import { HelperButton, SimpleTable, SimpleTableRow } from '@sovryn/ui';
 import { Decimal } from '@sovryn/utils';
 
@@ -14,21 +13,21 @@ import {
   TOKEN_RENDER_PRECISION,
 } from '../../../../../../../constants/currencies';
 import { translations } from '../../../../../../../locales/i18n';
+import { COMMON_SYMBOLS } from '../../../../../../../utils/asset';
 import { decimalic } from '../../../../../../../utils/math';
 import { useGetAccumulatedReward } from '../../../../hooks/useGetAccumulatedReward';
 import { useGetExpectedTokenAmount } from '../../../../hooks/useGetExpectedTokenAmount';
 import { useGetUserInfo } from '../../../../hooks/useGetUserInfo';
 import { AmmLiquidityPool } from '../../../../utils/AmmLiquidityPool';
 import { AdjustType } from '../../AdjustAndDepositModal.types';
 import { useGetPoolBalanceAndRewards } from '../../hooks/useGetPoolBalanceAndRewards';
-import { COMMON_SYMBOLS } from '../../../../../../../utils/asset';
 
 const pageTranslations =
   translations.marketMakingPage.adjustAndDepositModal.newPoolStatistics;
 
 type NewPoolStatisticsProps = {
   value: string;
-  asset: SupportedTokens;
+  asset: string;
   decimalAmount: Decimal;
   isInitialDeposit: boolean;
   adjustType: AdjustType;

apps/frontend/src/app/5_pages/MarketMakingPage/components/AmbientMarketMaking/components/AmbientPoolPositions/AmbientPoolPositions.constants.tsx

@@ -11,8 +11,10 @@ import { AmbientPosition } from '../../AmbientMarketMaking.types';
 import { AmbientLiquidityPool } from '../../utils/AmbientLiquidityPool';
 import { AmbientPoolPositionClaimFees } from './components/AmbientPoolPositionClaimFees/AmbientPoolPositionClaimFees';
 import { AmbientPoolPositionWithdraw } from './components/AmbientPoolPositionWithdraw/AmbientPoolPositionWithdraw';
+import { AmbientPoolReposition } from './components/AmbientPoolReposition/AmbientPoolReposition';
 import { AmbientPositionBalance } from './components/AmbientPositionBalance/AmbientPositionBalance';
 import { AmbientPositionPrices } from './components/AmbientPositionPrices/AmbientPositionPrices';
+import { AmbientPositionStatus } from './components/AmbientPositionStatus/AmbientPositionStatus';
 import { AmbientPositionValue } from './components/AmbientPositionValue/AmbientPositionValue';
 
 export const COLUMNS_CONFIG = (pool: AmbientLiquidityPool) => [
@@ -70,6 +72,13 @@ export const COLUMNS_CONFIG = (pool: AmbientLiquidityPool) => [
       <AmbientPositionBalance pool={pool} position={position} />
     ),
   },
+  {
+    id: 'status',
+    title: t(translations.ambientMarketMaking.positionsTable.status.title),
+    cellRenderer: (position: AmbientPosition) => (
+      <AmbientPositionStatus position={position} pool={pool} />
+    ),
+  },
   {
     id: '',
     title: '',
@@ -82,6 +91,11 @@ export const COLUMNS_CONFIG = (pool: AmbientLiquidityPool) => [
             className="mr-4"
           />
         )}
+        <AmbientPoolReposition
+          pool={pool}
+          position={position}
+          className="mr-4"
+        />
         <AmbientPoolPositionWithdraw pool={pool} position={position} />
       </div>
     ),

apps/frontend/src/app/5_pages/MarketMakingPage/components/AmbientMarketMaking/components/AmbientPoolPositions/AmbientPoolPositions.tsx

@@ -16,6 +16,7 @@ import { AmbientPoolPositionClaimFees } from './components/AmbientPoolPositionCl
 import { AmbientPoolPositionWithdraw } from './components/AmbientPoolPositionWithdraw/AmbientPoolPositionWithdraw';
 import { AmbientPositionBalance } from './components/AmbientPositionBalance/AmbientPositionBalance';
 import { AmbientPositionPrices } from './components/AmbientPositionPrices/AmbientPositionPrices';
+import { AmbientPositionStatus } from './components/AmbientPositionStatus/AmbientPositionStatus';
 import { AmbientPositionValue } from './components/AmbientPositionValue/AmbientPositionValue';
 
 type AmbientPoolPositionsProps = {
@@ -49,6 +50,18 @@ export const AmbientPoolPositions: FC<AmbientPoolPositionsProps> = ({
               label={t(translations.ambientMarketMaking.positionsTable.balance)}
               value={<AmbientPositionBalance pool={pool} position={position} />}
             />
+            <SimpleTableRow
+              label={t(
+                translations.ambientMarketMaking.positionsTable.status.title,
+              )}
+              value={
+                <AmbientPositionStatus
+                  pool={pool}
+                  position={position}
+                  className="flex justify-end"
+                />
+              }
+            />
             <SimpleTableRow
               label={t(translations.ambientMarketMaking.positionsTable.value)}
               value={<AmbientPositionValue pool={pool} position={position} />}

apps/frontend/src/app/5_pages/MarketMakingPage/components/AmbientMarketMaking/components/AmbientPoolPositions/AmbientPoolPositions.utils.ts

@@ -1,12 +1,23 @@
+import { MaxAllowanceTransferAmount } from '@uniswap/permit2-sdk';
+
+import { BigNumber, Contract, ethers } from 'ethers';
+
 import {
   baseTokenForConcLiq,
   bigNumToFloat,
   floatToBigNum,
   quoteTokenForConcLiq,
   tickToPrice,
 } from '@sovryn/sdex';
+import { CrocTokenView } from '@sovryn/sdex/dist/tokens';
+import { Decimal } from '@sovryn/utils';
 
+import { prepareApproveTransaction } from '../../../../../../../utils/transactions';
 import { PoolPositionType } from '../../../../MarketMakingPage.types';
+import {
+  MAXIMUM_PRICE,
+  MINIMUM_PRICE,
+} from '../../../BobDepositModal/BobDepositModal.constants';
 import { AmbientPosition } from '../../AmbientMarketMaking.types';
 
 export const getPositionBalance = (
@@ -58,3 +69,82 @@ export const getPositionBalance = (
     };
   }
 };
+
+export const calculateBoundedPrice = (
+  isMinimumPrice: boolean,
+  value: number,
+  currentPrice: number,
+) => {
+  if (value === 0) {
+    return currentPrice;
+  }
+
+  if (value === 100) {
+    return isMinimumPrice ? MINIMUM_PRICE : MAXIMUM_PRICE;
+  }
+
+  const priceDifference = Decimal.from(currentPrice).mul(
+    Decimal.from(value).div(100),
+  );
+
+  if (isMinimumPrice) {
+    const result = Decimal.from(currentPrice).sub(priceDifference);
+    return result.lt(0) ? 0 : result.toNumber();
+  }
+
+  return Decimal.from(currentPrice).add(priceDifference).toNumber();
+};
+
+export const adjustPriceByPercentage = (
+  percentage: number,
+  currentPrice: number,
+): number => {
+  const adjustmentFactor = 1 + percentage / 100;
+  return currentPrice * adjustmentFactor;
+};
+
+export const testAllowance = async (
+  owner: string,
+  token: CrocTokenView,
+  amount: BigNumber,
+) => {
+  const allowance = await token.allowance(owner);
+
+  if (allowance.lt(amount)) {
+    const approval = await token.approve();
+    return approval;
+  }
+};
+
+export const checkAndPrepareApproveTransaction = async ({
+  account,
+  token,
+  assetAmount,
+  chainId,
+  signer,
+}) => {
+  const allowance = await testAllowance(account, token, assetAmount);
+
+  if (allowance) {
+    const approve = await prepareApproveTransaction({
+      token: token.tokenAddr,
+      chain: chainId,
+      amount:
+        allowance.weiQty === ethers.constants.MaxUint256
+          ? MaxAllowanceTransferAmount
+          : allowance.weiQty,
+      spender: allowance.address,
+      contract: new Contract(
+        token.tokenAddr,
+        (
+          await token.context
+        ).erc20Write.interface,
+        signer,
+      ),
+    });
+
+    return approve;
+  }
+
+  return null;
+};

apps/frontend/src/app/5_pages/MarketMakingPage/components/AmbientMarketMaking/components/AmbientPoolPositions/components/AmbientPoolReposition/AmbientPoolReposition.tsx

@@ -0,0 +1,59 @@
+import React, { FC, useCallback, useState } from 'react';
+
+import { t } from 'i18next';
+
+import { ButtonSize, ButtonStyle, Button } from '@sovryn/ui';
+
+import { useMaintenance } from '../../../../../../../../../hooks/useMaintenance';
+import { translations } from '../../../../../../../../../locales/i18n';
+import { DepositContextProvider } from '../../../../../BobDepositModal/contexts/BobDepositModalContext';
+import { BobRepositionModal } from '../../../../../BobRepositionModal/BobRepositionModal';
+import { AmbientPosition } from '../../../../AmbientMarketMaking.types';
+import { AmbientLiquidityPool } from '../../../../utils/AmbientLiquidityPool';
+import { usePositionStatus } from '../../hooks/usePositionStatus';
+
+type AmbientPoolRepositionProps = {
+  pool: AmbientLiquidityPool;
+  position: AmbientPosition;
+  className?: string;
+};
+
+export const AmbientPoolReposition: FC<AmbientPoolRepositionProps> = ({
+  pool,
+  position,
+  className,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { checkMaintenance, States } = useMaintenance();
+  const withdrawLocked = checkMaintenance(States.BOB_WITHDRAW_LIQUIDITY);
+  const isOutOfRange = usePositionStatus(pool, position);
+
+  const toggleModal = useCallback(() => {
+    setIsOpen(prevIsOpen => !prevIsOpen);
+  }, []);
+
+  if (!isOutOfRange) {
+    return null;
+  }
+
+  return (
+    <>
+      <Button
+        style={ButtonStyle.secondary}
+        size={ButtonSize.small}
+        text={t(translations.common.buttons.reposition)}
+        onClick={toggleModal}
+        disabled={withdrawLocked}
+        className={className}
+      />
+      <DepositContextProvider>
+        <BobRepositionModal
+          isOpen={isOpen}
+          onClose={toggleModal}
+          pool={pool}
+          position={position}
+        />
+      </DepositContextProvider>
+    </>
+  );
+};