Use refs to handle multiple form submits for Operator Mapping

Dockerfile.dev

@@ -15,7 +15,7 @@ ENV PYTHON=/usr/bin/python3
 ENV NODE_OPTIONS=--max_old_space_size=3072
 
 # Copy package files and install node modules
-COPY package*.json yarn.lock ./
+COPY package*.json ./
 RUN npm install -g node-gyp
 RUN yarn install --ignore-scripts --frozen-lockfile
 RUN yarn upgrade @keep-network/coverage-pools@sepolia \

src/components/Modal/MapOperatorToStakingProviderModal/MapOperatorToStakingProviderForm.tsx

@@ -32,7 +32,7 @@ const validateInputtedOperatorAddress = async (
     operator: string
   ) => Promise<boolean>,
   mappedOperatorTbtc: string,
-  mappedOperatorRandomBeacon: string,
+  mappedOperatorRandomBeacon: string
 ): Promise<string | undefined> => {
   let validationMsg: string | undefined = ""
 
@@ -102,13 +102,21 @@ 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 && mappedOperatorTbtc !== undefined && mappedOperatorRandomBeacon !== undefined) {
+    if (
+      !errors.operator &&
+      mappedOperatorTbtc !== undefined &&
+      mappedOperatorRandomBeacon !== undefined
+    ) {
       errors.operator = await validateInputtedOperatorAddress(
         values.operator,
         checkIfOperatorIsMappedToAnotherStakingProvider,
         mappedOperatorTbtc,
-        mappedOperatorRandomBeacon,
+        mappedOperatorRandomBeacon
       )
     }
     if (!errors.operator && mappedOperatorTaco !== undefined) {
@@ -118,10 +126,14 @@ const MapOperatorToStakingProviderForm = withFormik<
           await checkIfOperatorIsMappedToAnotherStakingProvider(values.operator)
         validationMsg = undefined
         if (isOperatorMappedToAnotherStakingProvider) {
-          validationMsg = "Operator is already mapped to another staking provider."
+          validationMsg =
+            "Operator is already mapped to another staking provider."
         }
       } catch (error) {
-        console.error("`MapOperatorToStakingProviderForm` validation error.", error)
+        console.error(
+          "`MapOperatorToStakingProviderForm` validation error.",
+          error
+        )
         validationMsg = (error as Error)?.message
       }
       errors.operator = validationMsg

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>
@@ -132,7 +144,7 @@ const MapOperatorToStakingProviderModal: FC<
           )}
           <StakeAddressInfo stakingProvider={account ? account : AddressZero} />
           <MapOperatorToStakingProviderForm
-            innerRef={formRef}
+            innerRef={formRefTbtc}
             formId="map-operator-to-staking-provider-form-tbtc"
             initialAddress={
               isOperatorMappedOnlyInRandomBeacon
@@ -172,7 +184,7 @@ const MapOperatorToStakingProviderModal: FC<
           <LabelSm>Taco (requires 1tx)</LabelSm>
           <StakeAddressInfo stakingProvider={account ? account : AddressZero} />
           <MapOperatorToStakingProviderForm
-            innerRef={formRef}
+            innerRef={formRefTaco}
             formId="map-operator-to-staking-provider-form-taco"
             initialAddress={""}
             onSubmitForm={onSubmit}
@@ -187,7 +199,7 @@ const MapOperatorToStakingProviderModal: FC<
         <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>

src/enums/env.ts

@@ -20,7 +20,7 @@ const envVariables = [
   "DAPP_DEVELOPMENT_TESTNET_CONTRACTS",
 ] as const
 
-export type EnvVariableKey = typeof envVariables[number]
+export type EnvVariableKey = (typeof envVariables)[number]
 
 // In order not to break the previous enum API, so using eg.
 // `EnvVariable.ETH_HOSTNAME_HTTP` is still valid.

src/hooks/useFetchExternalPoolData.ts

@@ -16,7 +16,7 @@ const pools = {
 } as const
 
 type ExternalPool = keyof typeof pools
-type ExternalPoolId<T extends ExternalPool> = typeof pools[T][number]
+type ExternalPoolId<T extends ExternalPool> = (typeof pools)[T][number]
 
 const fetchCurvePool: (
   poolId: ExternalPoolId<"curve">

src/static/icons/tokenIconMap.ts

@@ -9,7 +9,7 @@ const tokenIcons = [
   "T_CIRCLE_BRAND",
 ] as const
 
-export type TokenIcon = typeof tokenIcons[number]
+export type TokenIcon = (typeof tokenIcons)[number]
 
 const tokenIconMap: Record<TokenIcon, ComponentType> = {
   KEEP_CIRCLE_BRAND: KeepCircleBrand,