Operator mapping - code cleaning

src/components/Modal/MapOperatorToStakingProviderConfirmationModal/index.tsx

@@ -9,25 +9,19 @@ import {
   ModalHeader,
 } from "@chakra-ui/react"
 import { AddressZero } from "@ethersproject/constants"
-import {
-  BodyLg,
-  BodyMd,
-  BodySm,
-  H5,
-  LabelSm,
-} from "@threshold-network/components"
+import { BodyLg, BodyMd, H5, LabelSm } from "@threshold-network/components"
 import { useWeb3React } from "@web3-react/core"
 import { ContractTransaction } from "ethers"
 import { FC, useCallback } from "react"
-import { useDispatch } from "react-redux"
 import { ModalType } from "../../../enums"
-import { useOperatorMappedtoStakingProviderHelpers } from "../../../hooks/staking-applications/useOperatorMappedToStakingProviderHelpers"
 import { useRegisterMultipleOperatorsTransaction } from "../../../hooks/staking-applications/useRegisterMultipleOperatorsTransaction"
 import { useRegisterOperatorTransaction } from "../../../hooks/staking-applications/useRegisterOperatorTransaction"
+import { useAppDispatch } from "../../../hooks/store"
 import { useModal } from "../../../hooks/useModal"
 import StakeAddressInfo from "../../../pages/Staking/StakeCard/StakeAddressInfo"
-import { mapOperatorToStakingProviderModalClosed } from "../../../store/modalQueue"
+import { mapOperatorToStakingProviderModalClosed } from "../../../store/modal"
 import { BaseModalProps } from "../../../types"
+import { isAddressZero } from "../../../web3/utils"
 import InfoBox from "../../InfoBox"
 import withBaseModal from "../withBaseModal"
 
@@ -60,17 +54,27 @@ const OperatorMappingConfirmation: FC<
 const MapOperatorToStakingProviderConfirmationModal: FC<
   BaseModalProps & {
     operator: string
+    mappedOperatorTbtc: string
+    mappedOperatorRandomBeacon: string
   }
-> = ({ operator, closeModal }) => {
+> = ({
+  operator,
+  mappedOperatorTbtc,
+  mappedOperatorRandomBeacon,
+  closeModal,
+}) => {
   const { account } = useWeb3React()
   const { registerMultipleOperators } =
     useRegisterMultipleOperatorsTransaction()
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
+
+  const isOperatorMappedOnlyInTbtc =
+    !isAddressZero(mappedOperatorTbtc) &&
+    isAddressZero(mappedOperatorRandomBeacon)
 
-  const operatorMappedToStakingProviderHelpers =
-    useOperatorMappedtoStakingProviderHelpers()
-  const { isOperatorMappedOnlyInRandomBeacon, isOperatorMappedOnlyInTbtc } =
-    operatorMappedToStakingProviderHelpers
+  const isOperatorMappedOnlyInRandomBeacon =
+    isAddressZero(mappedOperatorTbtc) &&
+    !isAddressZero(mappedOperatorRandomBeacon)
 
   const { openModal } = useModal()
   const onSuccess = useCallback(

src/components/Modal/MapOperatorToStakingProviderModal/MapOperatorToStakingProviderForm.tsx

@@ -2,7 +2,7 @@ import { FC, Ref } from "react"
 import { FormikProps, FormikErrors, withFormik } from "formik"
 import { Form, FormikInput } from "../../Forms"
 import { getErrorsObj, validateETHAddress } from "../../../utils/forms"
-import { OperatorMappedToStakingProviderHelpers } from "../../../hooks/staking-applications/useOperatorMappedToStakingProviderHelpers"
+import { isAddressZero } from "../../../web3/utils"
 
 export interface MapOperatorToStakingProviderFormValues {
   operator: string
@@ -28,8 +28,9 @@ const MapOperatorToStakingProviderFormBase: FC<
 
 type MapOperatorToStakingProviderFormProps = {
   initialAddress: string
+  mappedOperatorTbtc: string
+  mappedOperatorRandomBeacon: string
   innerRef: Ref<FormikProps<MapOperatorToStakingProviderFormValues>>
-  operatorMappedToStakingProviderHelpers: OperatorMappedToStakingProviderHelpers
   checkIfOperatorIsMappedToAnotherStakingProvider: (
     operator: string
   ) => Promise<boolean>
@@ -45,15 +46,18 @@ const MapOperatorToStakingProviderForm = withFormik<
   }),
   validate: async (values, props) => {
     const {
+      mappedOperatorTbtc,
+      mappedOperatorRandomBeacon,
       checkIfOperatorIsMappedToAnotherStakingProvider,
-      operatorMappedToStakingProviderHelpers,
     } = props
-    const {
-      operatorMappedRandomBeacon,
-      operatorMappedTbtc,
-      isOperatorMappedOnlyInRandomBeacon,
-      isOperatorMappedOnlyInTbtc,
-    } = operatorMappedToStakingProviderHelpers
+
+    const isOperatorMappedOnlyInTbtc =
+      !isAddressZero(mappedOperatorTbtc) &&
+      isAddressZero(mappedOperatorRandomBeacon)
+
+    const isOperatorMappedOnlyInRandomBeacon =
+      isAddressZero(mappedOperatorTbtc) &&
+      !isAddressZero(mappedOperatorRandomBeacon)
     const errors: FormikErrors<MapOperatorToStakingProviderFormValues> = {}
 
     errors.operator = validateETHAddress(values.operator)
@@ -69,14 +73,14 @@ const MapOperatorToStakingProviderForm = withFormik<
         }
         if (
           isOperatorMappedOnlyInRandomBeacon &&
-          values.operator !== operatorMappedRandomBeacon
+          values.operator !== mappedOperatorRandomBeacon
         ) {
           validationMsg =
             "The operator address doesn't match the one used in tbtc app"
         }
         if (
           isOperatorMappedOnlyInTbtc &&
-          values.operator !== operatorMappedTbtc
+          values.operator !== mappedOperatorTbtc
         ) {
           validationMsg =
             "The operator address doesn't match the one used in random beacon app"

src/components/Modal/MapOperatorToStakingProviderModal/index.tsx

@@ -7,7 +7,6 @@ import {
   Box,
   Button,
   H5,
-  HStack,
   LabelSm,
   ModalBody,
   ModalCloseButton,
@@ -25,32 +24,43 @@ import { ModalType } from "../../../enums"
 import { useModal } from "../../../hooks/useModal"
 import StakeAddressInfo from "../../../pages/Staking/StakeCard/StakeAddressInfo"
 import { useWeb3React } from "@web3-react/core"
-import { AddressZero } from "@ethersproject/constants"
 import { useThreshold } from "../../../contexts/ThresholdContext"
-import { isAddressZero, isSameETHAddress } from "../../../web3/utils"
-import { useOperatorMappedtoStakingProviderHelpers } from "../../../hooks/staking-applications/useOperatorMappedToStakingProviderHelpers"
+import {
+  isAddressZero,
+  isSameETHAddress,
+  AddressZero,
+} from "../../../web3/utils"
+
+export interface MapOperatorToStakingProviderModalProps {
+  mappedOperatorTbtc: string
+  mappedOperatorRandomBeacon: string
+}
 
-const MapOperatorToStakingProviderModal: FC<BaseModalProps> = () => {
+const MapOperatorToStakingProviderModal: FC<
+  BaseModalProps & MapOperatorToStakingProviderModalProps
+> = ({ mappedOperatorTbtc, mappedOperatorRandomBeacon }) => {
   const { account } = useWeb3React()
-  const operatorMappedToStakingProviderHelpers =
-    useOperatorMappedtoStakingProviderHelpers()
-  const {
-    isOperatorMappedOnlyInRandomBeacon,
-    isOperatorMappedOnlyInTbtc,
-    operatorMappedRandomBeacon,
-    operatorMappedTbtc,
-  } = operatorMappedToStakingProviderHelpers
   const formRef =
     useRef<FormikProps<MapOperatorToStakingProviderFormValues>>(null)
   const { closeModal, openModal } = useModal()
   const threshold = useThreshold()
 
+  const isOperatorMappedOnlyInTbtc =
+    !isAddressZero(mappedOperatorTbtc) &&
+    isAddressZero(mappedOperatorRandomBeacon)
+
+  const isOperatorMappedOnlyInRandomBeacon =
+    isAddressZero(mappedOperatorTbtc) &&
+    !isAddressZero(mappedOperatorRandomBeacon)
+
   const onSubmit = async ({
     operator,
   }: MapOperatorToStakingProviderFormValues) => {
     if (account) {
       openModal(ModalType.MapOperatorToStakingProviderConfirmation, {
         operator,
+        mappedOperatorTbtc,
+        mappedOperatorRandomBeacon,
       })
     }
   }
@@ -118,18 +128,17 @@ const MapOperatorToStakingProviderModal: FC<BaseModalProps> = () => {
             formId="map-operator-to-staking-provider-form"
             initialAddress={
               isOperatorMappedOnlyInRandomBeacon
-                ? operatorMappedRandomBeacon
+                ? mappedOperatorRandomBeacon
                 : isOperatorMappedOnlyInTbtc
-                ? operatorMappedTbtc
+                ? mappedOperatorTbtc
                 : ""
             }
             onSubmitForm={onSubmit}
             checkIfOperatorIsMappedToAnotherStakingProvider={
               checkIfOperatorIsMappedToAnotherStakingProvider
             }
-            operatorMappedToStakingProviderHelpers={
-              operatorMappedToStakingProviderHelpers
-            }
+            mappedOperatorTbtc={mappedOperatorTbtc}
+            mappedOperatorRandomBeacon={mappedOperatorRandomBeacon}
           />
         </Box>
         <AlertBox

src/components/Modal/MapOperatorToStakingProviderSuccessModal/index.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import { FC, Fragment } from "react"
 import {
   BodyMd,
   BodySm,
@@ -37,43 +37,50 @@ const MapOperatorToStakingProviderSuccessBase: FC<
       body={
         <>
           <List spacing="2" mb={"4rem"}>
-            <ListItem key="map_operator_succes_modal__operator">
+            <ListItem key="map_operator_succes_modal__staking_provider">
               <HStack justify="space-between">
-                <BodySm>Operator</BodySm>
+                <BodySm>Provider Address</BodySm>
                 <BodySm>
-                  {shortenAddress(transactions[0].application.operator)}
+                  {shortenAddress(transactions[0].application.stakingProvider)}
                 </BodySm>
               </HStack>
             </ListItem>
-            <ListItem key="map_operator_succes_modal__staking_provider">
+            <ListItem key="map_operator_succes_modal__operator">
               <HStack justify="space-between">
-                <BodySm>Staking Provider</BodySm>
+                <BodySm>Operator Address</BodySm>
                 <BodySm>
-                  {shortenAddress(transactions[0].application.stakingProvider)}
+                  {shortenAddress(transactions[0].application.operator)}
                 </BodySm>
               </HStack>
             </ListItem>
           </List>
-          {transactions.map((transaction, i) => {
-            const text = `${camelCaseToNormal(
-              transaction.application.appName
-            )} transaction`
-            return (
-              <BodySm
-                align="center"
-                mt={1}
-                key={`map_operator_transaction_${i}`}
-              >
-                View{" "}
+          <BodySm align="center" mt={"1"}>
+            {transactions.length === 1 ? (
+              <>
                 <ViewInBlockExplorer
-                  text={text}
-                  id={transaction.txHash}
+                  text="View"
+                  id={`map_operator_transaction_${transactions[0].txHash}`}
                   type={ExplorerDataType.TRANSACTION}
                 />{" "}
+                transaction on Etherscan
+              </>
+            ) : (
+              <>
+                View{" "}
+                {transactions.map((_, index) => (
+                  <Fragment key={`map_operator_transaction_${index}`}>
+                    <ViewInBlockExplorer
+                      text={`transaction ${index + 1}`}
+                      id={_.txHash}
+                      type={ExplorerDataType.TRANSACTION}
+                    />
+                    {index + 1 === transactions.length ? " " : " and "}
+                  </Fragment>
+                ))}
                 on Etherscan
-              </BodySm>
-            )
-          })}
+              </>
+            )}
+          </BodySm>
         </>
       }
     />

src/hooks/staking-applications/index.ts

@@ -1,4 +1,3 @@
-export * from "./useOperatorsMappedToStakingProvider"
 export * from "./useStakingAppContract"
 export * from "./useStakingAppDataByStakingProvider"
 export * from "./useStakingApplicationState"