Add liquidity limit

src/api/pools.ts

@@ -7,6 +7,7 @@ import { QUERY_KEYS } from "utils/queryKeys"
 import { useAccountBalances } from "./accountBalances"
 import { ApiPromise } from "@polkadot/api"
 import type { u32 } from "@polkadot/types"
+import { BN_NAN } from "utils/constants"
 
 export const useShareOfPools = (assets: string[]) => {
   const { account } = useAccount()
@@ -64,11 +65,12 @@ export const useSDKPools = () => {
 const getDynamicAssetFees =
   (api: ApiPromise, assetId: string | u32) => async () => {
     const res = await api.query.dynamicFees.assetFee(assetId)
-    const data = res.unwrap()
+
+    const data = res.unwrapOr(null)
 
     return {
-      protocolFee: data.protocolFee.toBigNumber().div(10_000),
-      assetFee: data.assetFee.toBigNumber().div(10_000),
+      protocolFee: data?.protocolFee.toBigNumber().div(10_000) ?? BN_NAN,
+      assetFee: data?.assetFee.toBigNumber().div(10_000) ?? BN_NAN,
     }
   }
 

src/components/Input/Input.tsx

@@ -39,35 +39,33 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     ref,
   ) => {
     return (
-      <>
-        <Label
-          label={label}
-          error={p.error}
-          withLabel={withLabel}
-          tooltip={tooltip}
-          id={name}
-        >
-          <SWrapper unit={p.unit}>
-            {iconStart}
-            <SInput
-              ref={ref}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                onChange(e.target.value)
-              }
-              value={value ?? ""}
-              id={name}
-              type={type}
-              error={p.error}
-              unit={p.unit}
-              placeholder={placeholder}
-              role="presentation"
-              autoComplete="off"
-              {...p}
-            />
-            {iconEnd}
-          </SWrapper>
-        </Label>
-      </>
+      <Label
+        label={label}
+        error={p.error}
+        withLabel={withLabel}
+        tooltip={tooltip}
+        id={name}
+      >
+        <SWrapper unit={p.unit}>
+          {iconStart}
+          <SInput
+            ref={ref}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onChange(e.target.value)
+            }
+            value={value ?? ""}
+            id={name}
+            type={type}
+            error={p.error}
+            unit={p.unit}
+            placeholder={placeholder}
+            role="presentation"
+            autoComplete="off"
+            {...p}
+          />
+          {iconEnd}
+        </SWrapper>
+      </Label>
     )
   },
 )

src/i18n/locales/en/translations.json

@@ -14,6 +14,7 @@
   "details": "Details",
   "manage": "Manage",
   "close": "Close",
+  "edit": "Edit",
   "submit": "Submit",
   "transfer": "Transfer",
   "24Volume": "24h volume",
@@ -270,6 +271,8 @@
   "liquidity.asset.capacity.full": "<0>Asset cap reached:</0> <1>{{ filled, compact }} / {{ capacity, compact }} {{ symbol }}</1>",
   "liquidity.add.modal.button.joinFarms": "Add liquidity & Join Farms",
   "liquidity.add.modal.title": "Add liquidity",
+  "liquidity.add.modal.limit.title": "Add Liquidity Limit",
+  "liquidity.add.modal.limit.validation.max": "Max value is {{value}}",
   "liquidity.add.modal.provideLiquidity": "Provide Liquidity",
   "liquidity.add.modal.provideLiquidity.loading": "Providing liquidity",
   "liquidity.add.modal.row.transactionCostValue": "≈ {{ amount, bignumber }} {{ symbol }}",

src/sections/pools/modals/AddLiquidity/AddLiquidity.tsx

@@ -20,10 +20,12 @@ import { isEvmAccount } from "utils/evm"
 import { useAccount } from "sections/web3-connect/Web3Connect.utils"
 import { scaleHuman } from "utils/balance"
 import { usePoolData } from "sections/pools/pool/Pool"
+import { LimitModal } from "./components/LimitModal/LimitModal"
 
 export enum Page {
   ADD_LIQUIDITY,
   ASSET_SELECTOR,
+  LIMIT_LIQUIDITY,
   WAIT,
 }
 
@@ -182,6 +184,11 @@ export const AddLiquidity = ({ isOpen, onClose, farms }: Props) => {
         page={page}
         direction={direction}
         onClose={onClose}
+        onBack={
+          page === Page.LIMIT_LIQUIDITY
+            ? () => paginateTo(Page.ADD_LIQUIDITY)
+            : undefined
+        }
         contents={[
           {
             title: t("liquidity.add.modal.title"),
@@ -203,6 +210,7 @@ export const AddLiquidity = ({ isOpen, onClose, farms }: Props) => {
                 onSuccess={onSuccess}
                 isJoinFarms={isJoinFarms}
                 setIsJoinFarms={setIsJoinFarms}
+                setLiquidityLimit={() => paginateTo(Page.LIMIT_LIQUIDITY)}
               />
             ),
           },
@@ -220,6 +228,14 @@ export const AddLiquidity = ({ isOpen, onClose, farms }: Props) => {
               />
             ),
           },
+          {
+            title: t("liquidity.add.modal.limit.title"),
+            noPadding: true,
+            headerVariant: "GeistMono",
+            content: (
+              <LimitModal onConfirm={() => paginateTo(Page.ADD_LIQUIDITY)} />
+            ),
+          },
           {
             title: steps[currentStep].label,
             headerVariant: "gradient",

src/sections/pools/modals/AddLiquidity/AddLiquidity.utils.ts

@@ -62,7 +62,7 @@ export const getAddToOmnipoolFee = (api: ApiPromise, farms: Farm[]) => {
   return txs
 }
 
-const getSharesToGet = (
+export const getSharesToGet = (
   omnipoolAsset: TOmnipoolAssetsData[number],
   amount: string,
 ) => {
@@ -98,7 +98,7 @@ export const useAddLiquidity = (assetId: string, assetValue?: string) => {
   const { account } = useAccount()
   const { data: assetBalance } = useTokenBalance(assetId, account?.address)
 
-  const poolShare = useMemo(() => {
+  const { poolShare, sharesToGet } = useMemo(() => {
     if (ommipoolAsset && assetValue) {
       const sharesToGet = getSharesToGet(
         ommipoolAsset,
@@ -108,16 +108,20 @@ export const useAddLiquidity = (assetId: string, assetValue?: string) => {
       const totalShares = BigNumber(ommipoolAsset.shares).plus(sharesToGet)
       const poolShare = BigNumber(sharesToGet).div(totalShares).times(100)
 
-      return poolShare
+      return { poolShare, sharesToGet }
     }
+
+    return { poolShare: undefined, sharesToGet: undefined }
   }, [assetValue, ommipoolAsset, pool.meta.decimals])
 
   return {
     poolShare,
+    sharesToGet,
     spotPrice,
     omnipoolFee,
     assetMeta: pool.meta,
     assetBalance,
+    ommipoolAsset,
   }
 }
 

src/sections/pools/modals/AddLiquidity/AddLiquidityForm.tsx

@@ -1,6 +1,6 @@
 import { Controller, FieldErrors, useForm } from "react-hook-form"
 import BigNumber from "bignumber.js"
-import { BN_0 } from "utils/constants"
+import { BN_0, BN_100 } from "utils/constants"
 import { WalletTransferAssetSelect } from "sections/wallet/transfer/WalletTransferAssetSelect"
 import { SummaryRow } from "components/Summary/SummaryRow"
 import { Spacer } from "components/Spacer/Spacer"
@@ -10,11 +10,12 @@ import { Trans, useTranslation } from "react-i18next"
 import { DisplayValue } from "components/DisplayValue/DisplayValue"
 import { PoolAddLiquidityInformationCard } from "./AddLiquidityInfoCard"
 import { Separator } from "components/Separator/Separator"
-import { Button } from "components/Button/Button"
+import { Button, ButtonTransparent } from "components/Button/Button"
 import { FormValues } from "utils/helpers"
 import { scale } from "utils/balance"
 import {
   getAddToOmnipoolFee,
+  getSharesToGet,
   useAddLiquidity,
   useAddToOmnipoolZod,
 } from "./AddLiquidity.utils"
@@ -31,6 +32,7 @@ import { useEffect } from "react"
 import { useAssets } from "providers/assets"
 import { Switch } from "components/Switch/Switch"
 import { FarmDetailsRow } from "sections/pools/farms/components/detailsCard/FarmDetailsRow"
+import { useLiquidityLimit } from "state/liquidityLimit"
 
 type Props = {
   assetId: string
@@ -42,6 +44,7 @@ type Props = {
   farms: Farm[]
   isJoinFarms: boolean
   setIsJoinFarms: (value: boolean) => void
+  setLiquidityLimit: () => void
 }
 
 export const AddLiquidityForm = ({
@@ -54,11 +57,13 @@ export const AddLiquidityForm = ({
   farms,
   isJoinFarms,
   setIsJoinFarms,
+  setLiquidityLimit,
 }: Props) => {
   const { t } = useTranslation()
   const { api } = useRpcProvider()
   const { native } = useAssets()
   const { createTransaction } = useStore()
+  const { addLiquidityLimit } = useLiquidityLimit()
 
   const zodSchema = useAddToOmnipoolZod(assetId, farms)
   const form = useForm<{
@@ -73,8 +78,14 @@ export const AddLiquidityForm = ({
 
   const [debouncedAmount] = useDebouncedValue(watch("amount"), 300)
 
-  const { poolShare, spotPrice, omnipoolFee, assetMeta, assetBalance } =
-    useAddLiquidity(assetId, debouncedAmount)
+  const {
+    poolShare,
+    spotPrice,
+    omnipoolFee,
+    assetMeta,
+    assetBalance,
+    ommipoolAsset,
+  } = useAddLiquidity(assetId, debouncedAmount)
 
   const estimatedFees = useEstimatedFees(getAddToOmnipoolFee(api, farms))
 
@@ -91,8 +102,19 @@ export const AddLiquidityForm = ({
 
     const amount = scale(values.amount, assetMeta.decimals).toString()
 
+    const tx =
+      BigNumber(addLiquidityLimit).gt(0) && ommipoolAsset
+        ? api.tx.omnipool.addLiquidityWithLimit(
+            assetId,
+            amount,
+            getSharesToGet(ommipoolAsset, amount)
+              .times(BN_100.minus(addLiquidityLimit).div(BN_100))
+              .toFixed(0),
+          )
+        : api.tx.omnipool.addLiquidity(assetId, amount)
+
     return await createTransaction(
-      { tx: api.tx.omnipool.addLiquidity(assetId, amount) },
+      { tx },
       {
         onSuccess: (result) => {
           onSuccess(result, amount)
@@ -186,6 +208,24 @@ export const AddLiquidityForm = ({
           )}
         />
         <Spacer size={20} />
+        <SummaryRow
+          label="Trade Limit"
+          content={
+            <div sx={{ flex: "row", align: "baseline", gap: 4 }}>
+              <Text>{t("value.percentage", { value: addLiquidityLimit })}</Text>
+              <ButtonTransparent onClick={() => setLiquidityLimit()}>
+                <Text color="brightBlue200">{t("edit")}</Text>
+              </ButtonTransparent>
+            </div>
+          }
+        />
+        <Separator
+          color="darkBlue401"
+          sx={{
+            my: 4,
+            width: "auto",
+          }}
+        />
         <SummaryRow
           label={t("liquidity.add.modal.tradeFee")}
           description={t("liquidity.add.modal.tradeFee.description")}

src/sections/pools/modals/AddLiquidity/components/LimitModal/LimitModal.styled.ts

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled"
+import { theme } from "theme"
+
+export const SBoxContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: 8px;
+  align-items: top;
+
+  padding: 8px;
+  margin: 16px 0 16px 0;
+
+  background-color: rgba(${theme.rgbColors.black}, 0.25);
+  border-radius: 12px;
+`