Remove extractOperatorMappingAdditionalData func

Remove `extractOperatorMappingAdditionalData` function and use the newly created
`selectMappedOperatorsAndAdditionalData` selector whenever possible

src/components/Modal/MapOperatorToStakingProviderModal/MapOperatorToStakingProviderForm.tsx

@@ -3,7 +3,6 @@ import { FormikProps, FormikErrors, withFormik } from "formik"
 import { Form, FormikInput } from "../../Forms"
 import { getErrorsObj, validateETHAddress } from "../../../utils/forms"
 import { isAddressZero, isSameETHAddress } from "../../../web3/utils"
-import { extractOperatorMappingAdditionalData } from "../../../utils/operatorMapping"
 
 export interface MapOperatorToStakingProviderFormValues {
   operator: string
@@ -32,24 +31,27 @@ const validateInputtedOperatorAddress = async (
   checkIfOperatorIsMappedToAnotherStakingProvider: (
     operator: string
   ) => Promise<boolean>,
-  mappedOperatorRandomBeacon: string,
-  mappedOperatorTbtc: string
+  mappedOperatorTbtc: string,
+  mappedOperatorRandomBeacon: string
 ): Promise<string | undefined> => {
   let validationMsg: string | undefined = ""
 
-  const { isOperatorMappedOnlyInTbtc, isOperatorMappedOnlyInRandomBeacon } =
-    extractOperatorMappingAdditionalData(
-      mappedOperatorTbtc,
-      mappedOperatorRandomBeacon
-    )
-
   try {
     const isOperatorMappedToAnotherStakingProvider =
       await checkIfOperatorIsMappedToAnotherStakingProvider(operator)
     validationMsg = undefined
     if (isOperatorMappedToAnotherStakingProvider) {
       validationMsg = "Operator is already mapped to another staking provider."
     }
+
+    const isOperatorMappedOnlyInTbtc =
+      !isAddressZero(mappedOperatorTbtc) &&
+      isAddressZero(mappedOperatorRandomBeacon)
+
+    const isOperatorMappedOnlyInRandomBeacon =
+      isAddressZero(mappedOperatorTbtc) &&
+      !isAddressZero(mappedOperatorRandomBeacon)
+
     if (
       isOperatorMappedOnlyInRandomBeacon &&
       !isSameETHAddress(operator, mappedOperatorRandomBeacon)
@@ -103,8 +105,8 @@ const MapOperatorToStakingProviderForm = withFormik<
       errors.operator = await validateInputtedOperatorAddress(
         values.operator,
         checkIfOperatorIsMappedToAnotherStakingProvider,
-        mappedOperatorRandomBeacon,
-        mappedOperatorTbtc
+        mappedOperatorTbtc,
+        mappedOperatorRandomBeacon
       )
     }
 

src/components/Modal/MapOperatorToStakingProviderModal/index.tsx

@@ -30,7 +30,8 @@ import {
   isSameETHAddress,
   AddressZero,
 } from "../../../web3/utils"
-import { extractOperatorMappingAdditionalData } from "../../../utils/operatorMapping"
+import { selectMappedOperatorsAndAdditionalData } from "../../../store/account/selectors"
+import { useAppSelector } from "../../../hooks/store"
 
 export interface MapOperatorToStakingProviderModalProps {
   mappedOperatorTbtc: string
@@ -39,18 +40,19 @@ export interface MapOperatorToStakingProviderModalProps {
 
 const MapOperatorToStakingProviderModal: FC<
   BaseModalProps & MapOperatorToStakingProviderModalProps
-> = ({ mappedOperatorTbtc, mappedOperatorRandomBeacon }) => {
+> = () => {
   const { account } = useWeb3React()
   const formRef =
     useRef<FormikProps<MapOperatorToStakingProviderFormValues>>(null)
   const { closeModal, openModal } = useModal()
   const threshold = useThreshold()
 
-  const { isOperatorMappedOnlyInTbtc, isOperatorMappedOnlyInRandomBeacon } =
-    extractOperatorMappingAdditionalData(
-      mappedOperatorTbtc,
-      mappedOperatorRandomBeacon
-    )
+  const {
+    mappedOperatorTbtc,
+    mappedOperatorRandomBeacon,
+    isOperatorMappedOnlyInRandomBeacon,
+    isOperatorMappedOnlyInTbtc,
+  } = useAppSelector(selectMappedOperatorsAndAdditionalData)
 
   const onSubmit = async ({
     operator,

src/pages/Staking/OperatorAddressMappingCard.tsx

@@ -10,26 +10,19 @@ import {
 } from "@threshold-network/components"
 import { FC } from "react"
 import { ModalType } from "../../enums"
+import { useAppSelector } from "../../hooks/store"
 import { useModal } from "../../hooks/useModal"
-import { extractOperatorMappingAdditionalData } from "../../utils/operatorMapping"
-import { isAddressZero } from "../../web3/utils"
+import { selectMappedOperatorsAndAdditionalData } from "../../store/account/selectors"
 
-const OperatorAddressMappingCard: FC<{
-  mappedOperatorTbtc: string
-  mappedOperatorRandomBeacon: string
-}> = ({ mappedOperatorTbtc, mappedOperatorRandomBeacon }) => {
+const OperatorAddressMappingCard: FC = () => {
   const { openModal } = useModal()
 
-  const { isOneOfTheAppsNotMapped } = extractOperatorMappingAdditionalData(
-    mappedOperatorTbtc,
-    mappedOperatorRandomBeacon
+  const { isOneOfTheAppsNotMapped } = useAppSelector(
+    selectMappedOperatorsAndAdditionalData
   )
 
   const onStartMappingClick = () => {
-    openModal(ModalType.MapOperatorToStakingProvider, {
-      mappedOperatorTbtc,
-      mappedOperatorRandomBeacon,
-    })
+    openModal(ModalType.MapOperatorToStakingProvider)
   }
 
   return (

src/pages/Staking/index.tsx

@@ -74,10 +74,7 @@ const StakingPage: PageComponent = (props) => {
             isOperatorMappingInitialFetchDone &&
             (isAddressZero(mappedOperators.tbtc) ||
               isAddressZero(mappedOperators.randomBeacon)) && (
-              <OperatorAddressMappingCard
-                mappedOperatorTbtc={mappedOperators.tbtc}
-                mappedOperatorRandomBeacon={mappedOperators.randomBeacon}
-              />
+              <OperatorAddressMappingCard />
             )}
           {hasStakes ? (
             stakes.map((stake) => (

src/store/account/selectors.ts

@@ -9,13 +9,18 @@ export const selectMappedOperatorsAndAdditionalData = createSelector(
   [selectAccountState],
   (accountState: AccountState) => {
     const { randomBeacon, tbtc } = accountState.operatorMapping.data
+    const isOperatorMappedOnlyInTbtc =
+      !isAddressZero(tbtc) && isAddressZero(randomBeacon)
+    const isOperatorMappedOnlyInRandomBeacon =
+      isAddressZero(tbtc) && !isAddressZero(randomBeacon)
+
     return {
       mappedOperatorTbtc: tbtc,
       mappedOperatorRandomBeacon: randomBeacon,
-      isOperatorMappedOnlyInTbtc:
-        !isAddressZero(tbtc) && isAddressZero(randomBeacon),
-      isOperatorMappedOnlyInRandomBeacon:
-        isAddressZero(tbtc) && !isAddressZero(randomBeacon),
+      isOperatorMappedOnlyInTbtc,
+      isOperatorMappedOnlyInRandomBeacon,
+      isOneOfTheAppsNotMapped:
+        isOperatorMappedOnlyInRandomBeacon || isOperatorMappedOnlyInTbtc,
       isOperatorMappedInBothApps:
         !isAddressZero(randomBeacon) && !isAddressZero(tbtc),
     }