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, isSameETHAddress } from "../../../web3/utils"
 
 export interface MapOperatorToStakingProviderFormValues {
   operator: string
@@ -26,10 +26,58 @@ const MapOperatorToStakingProviderFormBase: FC<
   )
 }
 
+const validateInputtedOperatorAddress = async (
+  operator: string,
+  checkIfOperatorIsMappedToAnotherStakingProvider: (
+    operator: string
+  ) => Promise<boolean>,
+  mappedOperatorRandomBeacon: string,
+  mappedOperatorTbtc: string
+): Promise<string | undefined> => {
+  let validationMsg: string | undefined = ""
+
+  const isOperatorMappedOnlyInTbtc =
+    !isAddressZero(mappedOperatorTbtc) &&
+    isAddressZero(mappedOperatorRandomBeacon)
+
+  const isOperatorMappedOnlyInRandomBeacon =
+    isAddressZero(mappedOperatorTbtc) &&
+    !isAddressZero(mappedOperatorRandomBeacon)
+
+  try {
+    const isOperatorMappedToAnotherStakingProvider =
+      await checkIfOperatorIsMappedToAnotherStakingProvider(operator)
+    validationMsg = undefined
+    if (isOperatorMappedToAnotherStakingProvider) {
+      validationMsg = "Operator is already mapped to another staking provider."
+    }
+    if (
+      isOperatorMappedOnlyInRandomBeacon &&
+      !isSameETHAddress(operator, mappedOperatorRandomBeacon)
+    ) {
+      validationMsg =
+        "The operator address doesn't match the one used in random beacon app"
+    }
+    if (
+      isOperatorMappedOnlyInTbtc &&
+      !isSameETHAddress(operator, mappedOperatorTbtc)
+    ) {
+      validationMsg =
+        "The operator address doesn't match the one used in tbtc app"
+    }
+  } catch (error) {
+    console.error("`MapOperatorToStakingProviderForm` validation error.", error)
+    validationMsg = (error as Error)?.message
+  }
+
+  return validationMsg
+}
+
 type MapOperatorToStakingProviderFormProps = {
   initialAddress: string
+  mappedOperatorTbtc: string
+  mappedOperatorRandomBeacon: string
   innerRef: Ref<FormikProps<MapOperatorToStakingProviderFormValues>>
-  operatorMappedToStakingProviderHelpers: OperatorMappedToStakingProviderHelpers
   checkIfOperatorIsMappedToAnotherStakingProvider: (
     operator: string
   ) => Promise<boolean>
@@ -45,50 +93,20 @@ const MapOperatorToStakingProviderForm = withFormik<
   }),
   validate: async (values, props) => {
     const {
+      mappedOperatorTbtc,
+      mappedOperatorRandomBeacon,
       checkIfOperatorIsMappedToAnotherStakingProvider,
-      operatorMappedToStakingProviderHelpers,
     } = props
-    const {
-      operatorMappedRandomBeacon,
-      operatorMappedTbtc,
-      isOperatorMappedOnlyInRandomBeacon,
-      isOperatorMappedOnlyInTbtc,
-    } = operatorMappedToStakingProviderHelpers
     const errors: FormikErrors<MapOperatorToStakingProviderFormValues> = {}
 
     errors.operator = validateETHAddress(values.operator)
     if (!errors.operator) {
-      let validationMsg: string | undefined = ""
-      try {
-        const isOperatorMappedToAnotherStakingProvider =
-          await checkIfOperatorIsMappedToAnotherStakingProvider(values.operator)
-        validationMsg = undefined
-        if (isOperatorMappedToAnotherStakingProvider) {
-          validationMsg =
-            "Operator is already mapped to another staking provider."
-        }
-        if (
-          isOperatorMappedOnlyInRandomBeacon &&
-          values.operator !== operatorMappedRandomBeacon
-        ) {
-          validationMsg =
-            "The operator address doesn't match the one used in tbtc app"
-        }
-        if (
-          isOperatorMappedOnlyInTbtc &&
-          values.operator !== operatorMappedTbtc
-        ) {
-          validationMsg =
-            "The operator address doesn't match the one used in random beacon app"
-        }
-      } catch (error) {
-        console.error(
-          "`MapOperatorToStakingProviderForm` validation error.",
-          error
-        )
-        validationMsg = (error as Error)?.message
-      }
-      errors.operator = validationMsg
+      errors.operator = await validateInputtedOperatorAddress(
+        values.operator,
+        checkIfOperatorIsMappedToAnotherStakingProvider,
+        mappedOperatorRandomBeacon,
+        mappedOperatorTbtc
+      )
     }
 
     return getErrorsObj(errors)

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,
       })
     }
   }
@@ -85,13 +95,14 @@ const MapOperatorToStakingProviderModal: FC<BaseModalProps> = () => {
             </H5>
           ) : (
             <H5>
-              We’ve noticed your wallet address is the same with your Provider
+              We’ve noticed your wallet address is the same as your Provider
               Address
             </H5>
           )}
           <BodyLg mt="4">
-            Would you like to map your Operator Address? Mapping an Operator
-            Address will require one transaction per application.
+            Map your Operator Address to your Provider Address to improve the
+            support of your hardware wallet. Mapping will require one
+            transaction per application.
           </BodyLg>
         </InfoBox>
         <BodyLg mt={"10"}>
@@ -118,18 +129,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,19 +1,12 @@
-import { FC } from "react"
-import {
-  BodyMd,
-  BodySm,
-  HStack,
-  List,
-  ListItem,
-} from "@threshold-network/components"
+import { FC, Fragment } from "react"
+import { BodySm, HStack, List, ListItem } from "@threshold-network/components"
 import withBaseModal from "../withBaseModal"
 import { BaseModalProps } from "../../../types"
 import { StakingAppName } from "../../../store/staking-applications"
 import TransactionSuccessModal from "../TransactionSuccessModal"
 import shortenAddress from "../../../utils/shortenAddress"
 import { ExplorerDataType } from "../../../utils/createEtherscanLink"
 import ViewInBlockExplorer from "../../ViewInBlockExplorer"
-import { camelCaseToNormal } from "../../../utils/text"
 
 export type OperatorMappedSuccessTx = {
   application: {
@@ -36,44 +29,51 @@ const MapOperatorToStakingProviderSuccessBase: FC<
       subTitle="You successfully mapped your Operator Address."
       body={
         <>
-          <List spacing="2" mb={"4rem"}>
-            <ListItem key="map_operator_succes_modal__operator">
+          <List spacing="2" mb={"16"}>
+            <ListItem>
               <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>
               <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={transactions[0].txHash}
                   type={ExplorerDataType.TRANSACTION}
                 />{" "}
+                transaction on Etherscan
+              </>
+            ) : (
+              <>
+                View{" "}
+                {transactions.map((_, index) => (
+                  <Fragment key={_.txHash}>
+                    <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"