Use approveAndCall in staking txs

.dockerignore

@@ -0,0 +1,27 @@
+# Copied from .gitignore
+
+# Local
+.DS_Store
+.idea
+.eslintcache
+
+# IDEs
+.vscode/
+.idea/
+
+# Generated
+build/
+dist/
+external/
+
+# Storybook
+storybook-static
+build-storybook.log
+cypress/fixtures
+cypress/plugins
+
+# Yarn
+node_modules/
+yarn-error.log
+.env
+.cosine/

.env → .env.example

@@ -19,3 +19,5 @@ REACT_APP_ELECTRUM_PORT=$ELECTRUM_PORT
 REACT_APP_MOCK_BITCOIN_CLIENT=true
 
 REACT_APP_WALLET_CONNECT_PROJECT_ID=$WALLET_CONNECT_PROJECT_ID
+
+REACT_APP_TACO_DOMAIN=dashboard

.env.production

@@ -20,3 +20,4 @@ REACT_APP_ELECTRUM_PORT=$ELECTRUM_PORT
 REACT_APP_MOCK_BITCOIN_CLIENT=false
 
 REACT_APP_WALLET_CONNECT_PROJECT_ID=$WALLET_CONNECT_PROJECT_ID
+REACT_APP_TACO_DOMAIN=mainnet

.env.test

@@ -1,2 +1,3 @@
 REACT_APP_SUPPORTED_CHAIN_ID=1337
 REACT_APP_MULTICALL_ADDRESS=0x086813525A7dC7dafFf015Cdf03896Fd276eab60
+REACT_APP_TACO_DOMAIN=dashboard

.gitignore

@@ -21,3 +21,5 @@ cypress/plugins
 # Yarn
 node_modules/
 yarn-error.log
+.env
+.cosine/

Dockerfile.dev

@@ -0,0 +1,33 @@
+# Use the specified image
+FROM node:18-buster-slim
+
+# Set the working directory
+WORKDIR /app
+
+# Install dependencies
+RUN apt-get update && apt-get install -y python3 make g++ git openssh-client ca-certificates && \
+    git config --global url."https://".insteadOf git:// && \
+    rm -rf /var/lib/apt/lists/* && \
+    apt-get clean
+
+# Set the environment variables
+ENV PYTHON=/usr/bin/python3
+ENV NODE_OPTIONS=--max_old_space_size=3072
+
+# Copy package files and install node modules
+COPY package*.json ./
+RUN npm install -g node-gyp
+RUN yarn install --ignore-scripts --frozen-lockfile
+RUN yarn upgrade @keep-network/coverage-pools@sepolia \
+  @keep-network/ecdsa@sepolia \
+  @keep-network/keep-core@sepolia \
+  @keep-network/keep-ecdsa@sepolia \
+  @keep-network/random-beacon@sepolia \
+  @keep-network/tbtc@sepolia \
+  @keep-network/tbtc-v2@sepolia \
+  @threshold-network/coverage-pools@npm:@keep-network/coverage-pools@sepolia \
+  @threshold-network/solidity-contracts@sepolia
+RUN yarn run postinstall
+
+# Expose port 3000
+EXPOSE 3000

README.md

@@ -112,3 +112,37 @@ The following procedure allows to deploy T token dashboard to production:
    approval of someone else from the development team.
 5. Once the release action is approved, the new version is automatically
    deployed to `dashboard.threshold.network`.
+
+## Local Development
+
+Update `.env` to contain:
+
+```
+REACT_APP_SUPPORTED_CHAIN_ID=11155111
+REACT_APP_ETH_HOSTNAME_HTTP=https://sepolia.infura.io/v3/<your API key here>
+REACT_APP_ETH_HOSTNAME_WS=wss://sepolia.infura.io/v3/<your API key here>
+REACT_APP_MULTICALL_ADDRESS=$MULTICALL_ADDRESS
+
+REACT_APP_FEATURE_FLAG_TBTC_V2=true
+REACT_APP_FEATURE_FLAG_TBTC_V2_REDEMPTION=true
+REACT_APP_FEATURE_FLAG_MULTI_APP_STAKING=true
+REACT_APP_FEATURE_FLAG_FEEDBACK_MODULE=false
+REACT_APP_FEATURE_FLAG_POSTHOG=false
+REACT_APP_FEATURE_FLAG_SENTRY=$SENTRY_SUPPORT
+REACT_APP_SENTRY_DSN=$SENTRY_DSN
+
+REACT_APP_ELECTRUM_PROTOCOL=wss
+REACT_APP_ELECTRUM_HOST=electrumx-server.test.tbtc.network
+REACT_APP_ELECTRUM_PORT=8443
+REACT_APP_MOCK_BITCOIN_CLIENT=false
+
+REACT_APP_WALLET_CONNECT_PROJECT_ID=$WALLET_CONNECT_PROJECT_ID
+
+REACT_APP_TACO_DOMAIN=dashboard
+```
+
+Then build the docker container and run the dashboard:
+
+```bash
+docker-compose up --build
+```

docker-compose.yml

@@ -0,0 +1,17 @@
+version: "3.8"
+
+services:
+  threshold-dashboard:
+    container_name: threshold-dashboard
+    working_dir: /app
+    environment:
+      - PYTHON=/usr/bin/python3
+      - NODE_OPTIONS=--max_old_space_size=3072
+    ports:
+      - "3000:3000"
+    volumes:
+      - .:/app # Bind mount the current directory to /app in the container
+    command: bash -c "yarn format:fix && yarn start"
+    build:
+      context: .
+      dockerfile: Dockerfile.dev

package.json

@@ -23,6 +23,7 @@
     "@ledgerhq/connect-kit-loader": "^1.1.2",
     "@reduxjs/toolkit": "^1.6.1",
     "@rehooks/local-storage": "^2.4.4",
+    "@nucypher/nucypher-contracts": "0.13.0",
     "@sentry/react": "^7.33.0",
     "@sentry/tracing": "^7.33.0",
     "@testing-library/jest-dom": "^5.11.4",

src/components/Modal/MapOperatorToStakingProviderConfirmationModal/index.tsx

@@ -55,11 +55,13 @@ const MapOperatorToStakingProviderConfirmationModal: FC<
     operator: string
     isOperatorMappedOnlyInTbtc: boolean
     isOperatorMappedOnlyInRandomBeacon: boolean
+    isOperatorMappedOnlyInTaco: boolean
   }
 > = ({
   operator,
   isOperatorMappedOnlyInTbtc,
   isOperatorMappedOnlyInRandomBeacon,
+  isOperatorMappedOnlyInTaco,
   closeModal,
 }) => {
   const { account } = useWeb3React()
@@ -135,9 +137,11 @@ const MapOperatorToStakingProviderConfirmationModal: FC<
           </H5>
           <BodyLg mt="4">
             This will require{" "}
-            {isOperatorMappedOnlyInRandomBeacon || isOperatorMappedOnlyInTbtc
-              ? "1 transaction"
-              : "2 transactions"}
+            {isOperatorMappedOnlyInRandomBeacon ||
+            isOperatorMappedOnlyInTbtc ||
+            isOperatorMappedOnlyInTaco
+              ? "2 transactions"
+              : "3 transactions"}
             . Each mapping is one transaction
           </BodyLg>
         </InfoBox>
@@ -155,6 +159,13 @@ const MapOperatorToStakingProviderConfirmationModal: FC<
             stakingProvider={account ? account : AddressZero}
           />
         )}
+        {!isOperatorMappedOnlyInTaco && (
+          <OperatorMappingConfirmation
+            appName="taco"
+            operator={operator}
+            stakingProvider={account ? account : AddressZero}
+          />
+        )}
       </ModalBody>
       <ModalFooter>
         <Button onClick={closeModal} variant="outline" mr={2}>

src/components/Modal/MapOperatorToStakingProviderModal/MapOperatorToStakingProviderForm.tsx

@@ -76,8 +76,9 @@ const validateInputtedOperatorAddress = async (
 
 type MapOperatorToStakingProviderFormProps = {
   initialAddress: string
-  mappedOperatorTbtc: string
-  mappedOperatorRandomBeacon: string
+  mappedOperatorTbtc?: string
+  mappedOperatorRandomBeacon?: string
+  mappedOperatorTaco?: string
   innerRef: Ref<FormikProps<MapOperatorToStakingProviderFormValues>>
   checkIfOperatorIsMappedToAnotherStakingProvider: (
     operator: string
@@ -96,19 +97,47 @@ const MapOperatorToStakingProviderForm = withFormik<
     const {
       mappedOperatorTbtc,
       mappedOperatorRandomBeacon,
+      mappedOperatorTaco,
       checkIfOperatorIsMappedToAnotherStakingProvider,
     } = 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
       )
     }
+    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)
   },

src/components/Modal/MapOperatorToStakingProviderModal/index.tsx

@@ -36,22 +36,27 @@ import ModalCloseButton from "../ModalCloseButton"
 export interface MapOperatorToStakingProviderModalProps {
   mappedOperatorTbtc: string
   mappedOperatorRandomBeacon: string
+  mappedOperatorTaco: string
 }
 
 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()
 
   const {
     mappedOperatorTbtc,
     mappedOperatorRandomBeacon,
+    mappedOperatorTaco,
     isOperatorMappedOnlyInRandomBeacon,
     isOperatorMappedOnlyInTbtc,
+    isOperatorMappedOnlyInTaco,
   } = useAppSelector(selectMappedOperators)
 
   const onSubmit = async ({
@@ -62,6 +67,7 @@ const MapOperatorToStakingProviderModal: FC<
         operator,
         isOperatorMappedOnlyInTbtc,
         isOperatorMappedOnlyInRandomBeacon,
+        isOperatorMappedOnlyInTaco,
       })
     }
   }
@@ -84,13 +90,25 @@ 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>
       <ModalCloseButton />
       <ModalBody>
         <InfoBox variant="modal">
-          {isOperatorMappedOnlyInRandomBeacon || isOperatorMappedOnlyInTbtc ? (
+          {isOperatorMappedOnlyInRandomBeacon ||
+          isOperatorMappedOnlyInTbtc ||
+          isOperatorMappedOnlyInTaco ? (
             <H5>
               We noticed you've only mapped 1 application's Operator Address.
             </H5>
@@ -122,12 +140,12 @@ const MapOperatorToStakingProviderModal: FC<
           ) : isOperatorMappedOnlyInTbtc ? (
             <LabelSm>random beacon app</LabelSm>
           ) : (
-            <LabelSm>tBTC + Random Beacon apps (requires 2txs)</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
@@ -155,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>