From ac202f713be65d73f3e8e9b53223b48600b4febc Mon Sep 17 00:00:00 2001
From: James Campbell <james.campbell@tanti.org.uk>
Date: Wed, 6 Dec 2023 16:56:37 +0100
Subject: [PATCH] Add extra card for Operator mapping

---
 .../MapOperatorToStakingProviderForm.tsx      | 59 +++++++++++--------
 .../index.tsx                                 | 46 ++++++++++++---
 2 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/src/components/Modal/MapOperatorToStakingProviderModal/MapOperatorToStakingProviderForm.tsx b/src/components/Modal/MapOperatorToStakingProviderModal/MapOperatorToStakingProviderForm.tsx
index ef1127d4b..9ca5fd9d4 100644
--- a/src/components/Modal/MapOperatorToStakingProviderModal/MapOperatorToStakingProviderForm.tsx
+++ b/src/components/Modal/MapOperatorToStakingProviderModal/MapOperatorToStakingProviderForm.tsx
@@ -32,8 +32,7 @@ const validateInputtedOperatorAddress = async (
     operator: string
   ) => Promise<boolean>,
   mappedOperatorTbtc: string,
-  mappedOperatorRandomBeacon: string,
-  mappedOperatorTaco: string
+  mappedOperatorRandomBeacon: string
 ): Promise<string | undefined> => {
   let validationMsg: string | undefined = ""
 
@@ -47,18 +46,11 @@ const validateInputtedOperatorAddress = async (
 
     const isOperatorMappedOnlyInTbtc =
       !isAddressZero(mappedOperatorTbtc) &&
-      isAddressZero(mappedOperatorRandomBeacon) &&
-      isAddressZero(mappedOperatorTaco)
+      isAddressZero(mappedOperatorRandomBeacon)
 
     const isOperatorMappedOnlyInRandomBeacon =
       isAddressZero(mappedOperatorTbtc) &&
-      !isAddressZero(mappedOperatorRandomBeacon) &&
-      isAddressZero(mappedOperatorTaco)
-
-    const isOperatorMappedOnlyInTaco =
-      isAddressZero(mappedOperatorTbtc) &&
-      isAddressZero(mappedOperatorRandomBeacon) &&
-      !isAddressZero(mappedOperatorTaco)
+      !isAddressZero(mappedOperatorRandomBeacon)
 
     if (
       isOperatorMappedOnlyInRandomBeacon &&
@@ -74,13 +66,6 @@ const validateInputtedOperatorAddress = async (
       validationMsg =
         "The operator address doesn't match the one used in tbtc app"
     }
-    if (
-      isOperatorMappedOnlyInTaco &&
-      !isSameETHAddress(operator, mappedOperatorTaco)
-    ) {
-      validationMsg =
-        "The operator address doesn't match the one used in TACo app"
-    }
   } catch (error) {
     console.error("`MapOperatorToStakingProviderForm` validation error.", error)
     validationMsg = (error as Error)?.message
@@ -91,9 +76,9 @@ const validateInputtedOperatorAddress = async (
 
 type MapOperatorToStakingProviderFormProps = {
   initialAddress: string
-  mappedOperatorTbtc: string
-  mappedOperatorRandomBeacon: string
-  mappedOperatorTaco: string
+  mappedOperatorTbtc?: string
+  mappedOperatorRandomBeacon?: string
+  mappedOperatorTaco?: string
   innerRef: Ref<FormikProps<MapOperatorToStakingProviderFormValues>>
   checkIfOperatorIsMappedToAnotherStakingProvider: (
     operator: string
@@ -117,16 +102,42 @@ const MapOperatorToStakingProviderForm = withFormik<
     } = props
     const errors: FormikErrors<MapOperatorToStakingProviderFormValues> = {}
 
+    console.log("tbtc", mappedOperatorTbtc)
+    console.log("random beacon", mappedOperatorRandomBeacon)
+    console.log("taco", mappedOperatorTaco)
+
     errors.operator = validateETHAddress(values.operator)
-    if (!errors.operator) {
+    if (
+      !errors.operator &&
+      mappedOperatorTbtc !== undefined &&
+      mappedOperatorRandomBeacon !== undefined
+    ) {
       errors.operator = await validateInputtedOperatorAddress(
         values.operator,
         checkIfOperatorIsMappedToAnotherStakingProvider,
         mappedOperatorTbtc,
-        mappedOperatorRandomBeacon,
-        mappedOperatorTaco
+        mappedOperatorRandomBeacon
       )
     }
+    if (!errors.operator && mappedOperatorTaco !== undefined) {
+      let validationMsg: string | undefined = ""
+      try {
+        const isOperatorMappedToAnotherStakingProvider =
+          await checkIfOperatorIsMappedToAnotherStakingProvider(values.operator)
+        validationMsg = undefined
+        if (isOperatorMappedToAnotherStakingProvider) {
+          validationMsg =
+            "Operator is already mapped to another staking provider."
+        }
+      } catch (error) {
+        console.error(
+          "`MapOperatorToStakingProviderForm` validation error.",
+          error
+        )
+        validationMsg = (error as Error)?.message
+      }
+      errors.operator = validationMsg
+    }
 
     return getErrorsObj(errors)
   },
diff --git a/src/components/Modal/MapOperatorToStakingProviderModal/index.tsx b/src/components/Modal/MapOperatorToStakingProviderModal/index.tsx
index 2a48ce4d4..b572e66cd 100644
--- a/src/components/Modal/MapOperatorToStakingProviderModal/index.tsx
+++ b/src/components/Modal/MapOperatorToStakingProviderModal/index.tsx
@@ -43,7 +43,9 @@ const MapOperatorToStakingProviderModal: FC<
   BaseModalProps & MapOperatorToStakingProviderModalProps
 > = () => {
   const { account } = useWeb3React()
-  const formRef =
+  const formRefTbtc =
+    useRef<FormikProps<MapOperatorToStakingProviderFormValues>>(null)
+  const formRefTaco =
     useRef<FormikProps<MapOperatorToStakingProviderFormValues>>(null)
   const { closeModal, openModal } = useModal()
   const threshold = useThreshold()
@@ -88,6 +90,16 @@ const MapOperatorToStakingProviderModal: FC<
     )
   }
 
+  const handleSubmit = async () => {
+    if (formRefTbtc.current) {
+      await formRefTbtc.current.handleSubmit()
+    }
+
+    if (formRefTaco.current) {
+      await formRefTaco.current.handleSubmit()
+    }
+  }
+
   return (
     <>
       <ModalHeader>Operator Address Mapping</ModalHeader>
@@ -128,19 +140,17 @@ const MapOperatorToStakingProviderModal: FC<
           ) : isOperatorMappedOnlyInTbtc ? (
             <LabelSm>random beacon app</LabelSm>
           ) : (
-            <LabelSm>tBTC + Random Beacon + TACo (requires 3txs)</LabelSm>
+            <LabelSm>tBTC + Random Beacon (requires 2txs)</LabelSm>
           )}
           <StakeAddressInfo stakingProvider={account ? account : AddressZero} />
           <MapOperatorToStakingProviderForm
-            innerRef={formRef}
-            formId="map-operator-to-staking-provider-form"
+            innerRef={formRefTbtc}
+            formId="map-operator-to-staking-provider-form-tbtc"
             initialAddress={
               isOperatorMappedOnlyInRandomBeacon
                 ? mappedOperatorRandomBeacon
                 : isOperatorMappedOnlyInTbtc
                 ? mappedOperatorTbtc
-                : isOperatorMappedOnlyInTaco
-                ? mappedOperatorTaco
                 : ""
             }
             onSubmitForm={onSubmit}
@@ -149,7 +159,6 @@ const MapOperatorToStakingProviderModal: FC<
             }
             mappedOperatorTbtc={mappedOperatorTbtc}
             mappedOperatorRandomBeacon={mappedOperatorRandomBeacon}
-            mappedOperatorTaco={mappedOperatorTaco}
           />
         </Box>
         <AlertBox
@@ -164,12 +173,33 @@ const MapOperatorToStakingProviderModal: FC<
             transactions, one transaction per application.
           </BodyXs>
         </AlertBox>
+        <Box
+          p={"24px"}
+          border={"1px solid"}
+          borderColor={"gray.100"}
+          borderRadius={"12px"}
+          mt={"5"}
+          mb={"5"}
+        >
+          <LabelSm>Taco (requires 1tx)</LabelSm>
+          <StakeAddressInfo stakingProvider={account ? account : AddressZero} />
+          <MapOperatorToStakingProviderForm
+            innerRef={formRefTaco}
+            formId="map-operator-to-staking-provider-form-taco"
+            initialAddress={""}
+            onSubmitForm={onSubmit}
+            checkIfOperatorIsMappedToAnotherStakingProvider={
+              checkIfOperatorIsMappedToAnotherStakingProvider
+            }
+            mappedOperatorTaco={mappedOperatorTaco}
+          />
+        </Box>
       </ModalBody>
       <ModalFooter>
         <Button onClick={closeModal} variant="outline" mr={2}>
           Dismiss
         </Button>
-        <Button type="submit" form="map-operator-to-staking-provider-form">
+        <Button type="submit" onClick={handleSubmit}>
           Map Address
         </Button>
       </ModalFooter>