Use new join farms extrinsics

src/sections/pools/farms/components/detailsCard/FarmDetailsRow.tsx

@@ -50,7 +50,7 @@ export const FarmDetailsRow = ({ farm }: FarmDetailsRowProps) => {
         />
         <div>
           <Text fs={12} lh={12} color="brightBlue300" font="GeistMedium">
-            {BN(farm.apr).gt(0) && t("value.APR", { apr: BN(farm.apr) })}
+            {t("value.APR", { apr: BN(farm.apr) })}
           </Text>
         </div>
         <div sx={{ ml: "auto", flex: "row", align: "center" }}>

src/sections/pools/farms/modals/join/JoinFarmsModal.tsx

@@ -1,10 +1,7 @@
 import { TFarmAprData, useFarmCurrentPeriod } from "api/farms"
 import { Modal } from "components/Modal/Modal"
 import { useModalPagination } from "components/Modal/Modal.utils"
-import {
-  LoadingPage,
-  ModalContents,
-} from "components/Modal/contents/ModalContents"
+import { ModalContents } from "components/Modal/contents/ModalContents"
 import { Text } from "components/Typography/Text/Text"
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -13,7 +10,6 @@ import { FarmDetailsCard } from "sections/pools/farms/components/detailsCard/Far
 import { FarmDetailsModal } from "sections/pools/farms/modals/details/FarmDetailsModal"
 import { TLPData } from "utils/omnipool"
 import { JoinFarmsForm } from "./JoinFarmsForm"
-import { getStepState, Stepper } from "components/Stepper/Stepper"
 import { usePoolData } from "sections/pools/pool/Pool"
 import { TDeposit } from "api/deposits"
 
@@ -27,7 +23,6 @@ type JoinFarmModalProps = {
 export enum Page {
   JOIN_FARM,
   FARM_DETAILS,
-  WAIT,
 }
 
 export const JoinFarmModal = ({
@@ -41,25 +36,16 @@ export const JoinFarmModal = ({
     pool: { meta, id: poolId, farms: allFarms },
   } = usePoolData()
   const [selectedFarm, setSelectedFarm] = useState<TFarmAprData | null>(null)
-  const [currentStep, setCurrentStep] = useState(0)
 
   const { getCurrentPeriod } = useFarmCurrentPeriod()
   const { page, direction, paginateTo } = useModalPagination()
 
   const farms = initialFarms ?? allFarms
-  const isMultipleFarms = farms.length > 1
 
   const joinFarms = useJoinFarms({
     poolId,
     farms,
-    deposit: {
-      onClose,
-      disableAutoClose: isMultipleFarms,
-      onSuccess: () => setCurrentStep(1),
-      onSubmitted: () => (isMultipleFarms ? paginateTo(Page.WAIT) : null),
-      onError: onClose,
-    },
-    redeposit: {
+    options: {
       onClose,
       onError: onClose,
     },
@@ -74,39 +60,8 @@ export const JoinFarmModal = ({
     setSelectedFarm(null)
   }
 
-  const steps = [
-    {
-      id: 0,
-      label: t("farms.modal.join.first"),
-      loadingLabel: t("farms.modal.join.first.loading"),
-    },
-    ...(isMultipleFarms
-      ? [
-          {
-            id: 1,
-            label: t("farms.modal.join.rest"),
-            loadingLabel: t("farms.modal.join.rest.loading"),
-          },
-        ]
-      : []),
-  ]
-
   return (
-    <Modal
-      open
-      onClose={onClose}
-      disableCloseOutside
-      topContent={
-        isMultipleFarms ? (
-          <Stepper
-            steps={steps.map((step) => ({
-              label: step.label,
-              state: getStepState(step.id, currentStep),
-            }))}
-          />
-        ) : undefined
-      }
-    >
+    <Modal open onClose={onClose} disableCloseOutside>
       <ModalContents
         onClose={onClose}
         page={page}
@@ -158,11 +113,6 @@ export const JoinFarmModal = ({
               />
             ),
           },
-          {
-            title: steps[currentStep].label,
-            headerVariant: "gradient",
-            content: <LoadingPage title={steps[currentStep].loadingLabel} />,
-          },
         ]}
       />
     </Modal>

src/sections/pools/farms/modals/joinedFarmDetails/JoinedFarmsDetails.tsx

@@ -50,7 +50,7 @@ function JoinedFarmsDetailsRedeposit(props: {
   const joinFarms = useJoinFarms({
     poolId,
     farms: availableFarms,
-    redeposit: {
+    options: {
       onSubmitted: () => props.onTxClose(),
       onBack: () => {},
       onClose: () => props.onTxClose(),

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

@@ -1,181 +1,35 @@
 import { Modal } from "components/Modal/Modal"
 import { useModalPagination } from "components/Modal/Modal.utils"
-import {
-  LoadingPage,
-  ModalContents,
-} from "components/Modal/contents/ModalContents"
+import { ModalContents } from "components/Modal/contents/ModalContents"
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { AssetsModalContent } from "sections/assets/AssetsModal"
 import { AddLiquidityForm } from "./AddLiquidityForm"
 import { isXYKPoolType } from "sections/pools/PoolsPage.utils"
 import { AddLiquidityFormXYK } from "./AddLiquidityFormXYK"
-import { getStepState, Stepper } from "components/Stepper/Stepper"
-import { useRpcProvider } from "providers/rpcProvider"
-import { ISubmittableResult } from "@polkadot/types/types"
-import { useJoinFarms } from "utils/farms/deposit"
-import { useRefetchAccountAssets } from "api/deposits"
-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"
 
 export enum Page {
   ADD_LIQUIDITY,
   ASSET_SELECTOR,
-  WAIT,
 }
 
-type Props = {
+type AddLiquidityProps = {
   isOpen: boolean
   onClose: () => void
 }
 
-export const AddLiquidity = ({ isOpen, onClose }: Props) => {
-  const { api } = useRpcProvider()
+export const AddLiquidity = ({ isOpen, onClose }: AddLiquidityProps) => {
   const { pool } = usePoolData()
   const { t } = useTranslation()
-  const { account } = useAccount()
-  const { page, direction, back, paginateTo } = useModalPagination()
-  const refetch = useRefetchAccountAssets()
-  const isEvm = isEvmAccount(account?.address)
-  const farms = pool.farms
-
-  const [assetId, setAssetId] = useState<string>(pool.id)
-  const [currentStep, setCurrentStep] = useState(0)
-  const [isJoinFarms, setIsJoinFarms] = useState(farms.length > 0)
+  const { page, direction, back } = useModalPagination()
+  const [assetId, setAssetId] = useState(pool.id)
 
+  const farms = pool.farms
   const isXYK = isXYKPoolType(pool)
-  const willJoinFarms = farms.length > 0 && isJoinFarms
-
-  const joinFarms = useJoinFarms({
-    poolId: pool.id,
-    farms,
-    deposit: {
-      onClose,
-      disableAutoClose: farms.length > 1,
-      onSuccess: () => {
-        setCurrentStep(2)
-      },
-      onError: onClose,
-    },
-    redeposit: {
-      onClose,
-      onError: onClose,
-    },
-  })
-
-  const onSuccess = async (result: ISubmittableResult, value: string) => {
-    if (willJoinFarms) {
-      let positionId: string | undefined
-
-      if (isEvm) {
-        const nftId = await api.consts.omnipool.nftCollectionId.toString()
-        const positions = await api.query.uniques.account.entries(
-          account?.address,
-          nftId,
-        )
-
-        positionId = positions
-          .map((position) => position[0].args[2].toNumber())
-          .sort((a, b) => b - a)[0]
-          .toString()
-      } else {
-        for (const record of result.events) {
-          if (api.events.omnipool.PositionCreated.is(record.event)) {
-            positionId = record.event.data.positionId.toString()
-          }
-        }
-      }
-
-      if (positionId) {
-        setCurrentStep(1)
-        joinFarms({ positionId, value })
-      }
-    }
-    refetch()
-  }
-
-  const onXykSuccess = async (
-    result: ISubmittableResult,
-    calculatedShares: string,
-  ) => {
-    if (willJoinFarms) {
-      setCurrentStep(1)
-
-      let shares = ""
-
-      if (!isEvm) {
-        for (const record of result.events) {
-          if (api.events.tokens.Deposited.is(record.event)) {
-            if (record.event.data.currencyId.toString() === pool.id) {
-              shares = record.event.data.amount.toString()
-            }
-          }
-        }
-      } else {
-        const balance = await api.query.tokens.accounts(
-          account?.address ?? "",
-          pool.id,
-        )
-
-        const free = balance.free.toBigNumber()
-        const diff = scaleHuman(free, pool.meta.decimals)
-          .minus(scaleHuman(calculatedShares, pool.meta.decimals))
-          .abs()
-
-        // go with the whole balance
-        if (diff.lt(0.1)) {
-          shares = free.toString()
-        } else {
-          shares = calculatedShares
-        }
-      }
-
-      if (shares) {
-        joinFarms({ shares })
-      }
-    }
-  }
-
-  const steps = [
-    {
-      id: 0,
-      label: t("liquidity.add.modal.provideLiquidity"),
-      loadingLabel: t("liquidity.add.modal.provideLiquidity.loading"),
-    },
-    {
-      id: 1,
-      label: t("farms.modal.join.first"),
-      loadingLabel: t("farms.modal.join.first.loading"),
-    },
-    ...(farms.length > 1
-      ? [
-          {
-            id: 2,
-            label: t("farms.modal.join.rest"),
-            loadingLabel: t("farms.modal.join.rest.loading"),
-          },
-        ]
-      : []),
-  ]
 
   return (
-    <Modal
-      open={isOpen}
-      disableCloseOutside
-      onClose={onClose}
-      topContent={
-        willJoinFarms ? (
-          <Stepper
-            steps={steps.map((step) => ({
-              label: step.label,
-              state: getStepState(step.id, currentStep),
-            }))}
-          />
-        ) : undefined
-      }
-    >
+    <Modal open={isOpen} disableCloseOutside onClose={onClose}>
       <ModalContents
         disableAnimation
         page={page}
@@ -185,22 +39,12 @@ export const AddLiquidity = ({ isOpen, onClose }: Props) => {
           {
             title: t("liquidity.add.modal.title"),
             content: isXYK ? (
-              <AddLiquidityFormXYK
-                pool={pool}
-                onClose={onClose}
-                onSuccess={onXykSuccess}
-                onSubmitted={() => paginateTo(Page.WAIT)}
-                setIsJoinFarms={setIsJoinFarms}
-              />
+              <AddLiquidityFormXYK pool={pool} onClose={onClose} />
             ) : (
               <AddLiquidityForm
                 assetId={assetId}
-                onClose={onClose}
                 farms={farms}
-                onSubmitted={() => paginateTo(Page.WAIT)}
-                onSuccess={onSuccess}
-                isJoinFarms={isJoinFarms}
-                setIsJoinFarms={setIsJoinFarms}
+                onClose={onClose}
               />
             ),
           },
@@ -218,11 +62,6 @@ export const AddLiquidity = ({ isOpen, onClose }: Props) => {
               />
             ),
           },
-          {
-            title: steps[currentStep].label,
-            headerVariant: "gradient",
-            content: <LoadingPage title={steps[currentStep].loadingLabel} />,
-          },
         ]}
       />
     </Modal>