Use new join farms extrinsics

src/components/AssetInput/AssetInput.tsx

@@ -17,7 +17,7 @@ export type AssetInputProps = {
   onChange: (val: string) => void
   name: string
   label: string
-  displayValue?: BigNumber | 0 | null
+  displayValue?: string
   unit?: Maybe<string>
   type?: string
   placeholder?: string
@@ -56,7 +56,7 @@ export const AssetInput = forwardRef<HTMLInputElement, AssetInputProps>(
           </SInputWrapper>
           {props.displayValue != null ? (
             <SDollars>
-              ≈ <DisplayValue value={props.displayValue} />
+              ≈ <DisplayValue value={BigNumber(props.displayValue)} />
             </SDollars>
           ) : null}
         </SLabelWrapper>

src/components/AssetSelect/AssetSelect.tsx

@@ -7,7 +7,7 @@ import React, { forwardRef, ReactNode, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { theme } from "theme"
 import { getFloatingPointAmount } from "utils/balance"
-import { useDisplayPrice } from "utils/displayAsset"
+import { useDisplayPrice, useDisplayShareTokenPrice } from "utils/displayAsset"
 import { Maybe } from "utils/helpers"
 import { SContainer, SMaxButton } from "./AssetSelect.styled"
 import { AssetSelectButton } from "./AssetSelectButton"
@@ -49,15 +49,23 @@ export const AssetSelect = forwardRef<HTMLInputElement, AssetSelectProps>(
 
     const spotPriceId =
       isBond(asset) && !asset.isTradable ? asset.underlyingAssetId : asset.id
+    const { isShareToken } = asset
 
-    const spotPriceAsset = useDisplayPrice(spotPriceId)
+    const spotPriceAsset = useDisplayPrice(
+      isShareToken ? undefined : spotPriceId,
+    )
+    const shareTokenSpotPrice = useDisplayShareTokenPrice(
+      isShareToken ? [spotPriceId] : [],
+    )
 
-    const spotPrice = spotPriceAsset.data
+    const spotPrice = isShareToken
+      ? shareTokenSpotPrice.data?.[0].spotPrice
+      : spotPriceAsset.data?.spotPrice.toString()
 
     const displayValue = useMemo(() => {
-      if (!props.value) return 0
-      if (spotPrice?.spotPrice == null) return null
-      return spotPrice.spotPrice.times(props.value)
+      if (!props.value || !spotPrice) return undefined
+
+      return BigNumber(spotPrice).times(props.value).toString()
     }, [props.value, spotPrice])
 
     return (

src/components/AssetSelect/AssetSelectSkeleton.tsx

@@ -68,7 +68,7 @@ export const AssetSelectSkeleton = (props: {
             name={props.name}
             label={t("selectAsset.input.label")}
             onChange={() => null}
-            displayValue={0}
+            displayValue="0"
             placeholder="0.00"
             unit="HDX"
             css={css`

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

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

src/sections/pools/farms/position/FarmingPosition.tsx

@@ -165,23 +165,27 @@ export const FarmingPosition = ({
     }
   })
 
-  const totalRewardsValue = claimableAssets
-    .map((claimableAsset) =>
-      t("value.tokenWithSymbol", {
-        value: claimableAsset.value.rewards,
-        symbol: claimableAsset.symbol,
-      }),
-    )
-    .join(" + ")
-
-  const maxTotalRewardsValue = claimableAssets
-    .map((claimableAsset) =>
-      t("value.tokenWithSymbol", {
-        value: BigNumber(claimableAsset.value.maxRewards),
-        symbol: claimableAsset.symbol,
-      }),
-    )
-    .join(" + ")
+  const totalRewardsValue = claimableAssets.length
+    ? claimableAssets
+        .map((claimableAsset) =>
+          t("value.tokenWithSymbol", {
+            value: claimableAsset.value.rewards,
+            symbol: claimableAsset.symbol,
+          }),
+        )
+        .join(" + ")
+    : "0"
+
+  const maxTotalRewardsValue = claimableAssets.length
+    ? claimableAssets
+        .map((claimableAsset) =>
+          t("value.tokenWithSymbol", {
+            value: BigNumber(claimableAsset.value.maxRewards),
+            symbol: claimableAsset.symbol,
+          }),
+        )
+        .join(" + ")
+    : "0"
 
   // use latest entry date
   const enteredDate = useEnteredDate(
@@ -341,7 +345,10 @@ export const FarmingPosition = ({
               )}
               <div sx={{ flex: "column", align: "flex-end" }}>
                 {isDesktop && (
-                  <Text fs={14} color={color}>
+                  <Text
+                    fs={14}
+                    color={isClaimable === undefined ? "white" : color}
+                  >
                     {totalRewardsValue}
                   </Text>
                 )}