Merge pull request #625 from threshold-network/taco

Add Taco application to dashboard

Author: cygnusv

.env renamed to .env.example

@@ -18,4 +18,6 @@ REACT_APP_ELECTRUM_HOST=$ELECTRUM_HOST
 REACT_APP_ELECTRUM_PORT=$ELECTRUM_PORT
 REACT_APP_MOCK_BITCOIN_CLIENT=true
 
-REACT_APP_WALLET_CONNECT_PROJECT_ID=$WALLET_CONNECT_PROJECT_ID
+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 yarn.lock ./
+RUN npm install -g node-gyp
+RUN yarn install --ignore-scripts
+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,18 @@
+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
+      - /app/node_modules # This will prevent node_modules from being overwritten by the local volume
+    command: bash -c "yarn format:fix && yarn start"
+    build:
+      context: .
+      dockerfile: Dockerfile.dev

package.json

@@ -25,6 +25,7 @@
     "@ledgerhq/wallet-api-client-react": "^1.1.1",
     "@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/DeauthorizeApplicationModal/InititateDeauthorization.tsx

@@ -119,20 +119,24 @@ const InitiateDeauthorization: FC<
           </FlowStep>
           <FlowStep
             preTitle="Step 2"
-            title="45 day cooldown"
+            title={
+              stakingAppName === "taco" ? "6 month cooldown" : "45 day cooldown"
+            }
             status={FlowStepStatus.inactive}
             size="sm"
           >
-            You must wait a 45 day cooldown to then confirm the deauthorization.
-            This is 1 transaction.
+            You must wait a {stakingAppName === "taco" ? "6 month" : "45 day"}{" "}
+            cooldown to then confirm the deauthorization. This is 1 transaction.
           </FlowStep>
         </Stack>
         <Alert status="warning">
           <AlertIcon />
-          Take note! In this 45 day cooldown period, you cannot increase or
-          decrease your authorization. As a measure of security for the entire
-          network, in the event of slashing you will be slashed based on your
-          initial amount.
+          Take note! In this {stakingAppName === "taco"
+            ? "6 month"
+            : "45 day"}{" "}
+          cooldown period, you cannot increase or decrease your authorization.
+          As a measure of security for the entire network, in the event of
+          slashing you will be slashed based on your initial amount.
         </Alert>
       </ModalBody>
       <ModalFooter>

src/components/Modal/MapOperatorToStakingProviderConfirmationModal/index.tsx

@@ -11,9 +11,10 @@ import {
 import { AddressZero } from "@ethersproject/constants"
 import { BodyLg, BodyMd, H5, LabelSm } from "@threshold-network/components"
 import { useWeb3React } from "@web3-react/core"
-import { FC, useCallback } from "react"
+import { FC, useCallback, useState } from "react"
 import { ModalType } from "../../../enums"
 import { useRegisterMultipleOperatorsTransaction } from "../../../hooks/staking-applications/useRegisterMultipleOperatorsTransaction"
+import { useBondOperatorTransaction } from "../../../hooks/staking-applications/useBondOperatorTransaction"
 import { useRegisterOperatorTransaction } from "../../../hooks/staking-applications/useRegisterOperatorTransaction"
 import { useAppDispatch } from "../../../hooks/store"
 import { useModal } from "../../../hooks/useModal"
@@ -23,6 +24,7 @@ import { BaseModalProps } from "../../../types"
 import InfoBox from "../../InfoBox"
 import withBaseModal from "../withBaseModal"
 import { OnSuccessCallback } from "../../../web3/hooks"
+import { ApplicationForOperatorMapping } from "../MapOperatorToStakingProviderModal"
 
 const OperatorMappingConfirmation: FC<
   BoxProps & { appName: string; operator: string; stakingProvider: string }
@@ -52,16 +54,9 @@ const OperatorMappingConfirmation: FC<
 
 const MapOperatorToStakingProviderConfirmationModal: FC<
   BaseModalProps & {
-    operator: string
-    isOperatorMappedOnlyInTbtc: boolean
-    isOperatorMappedOnlyInRandomBeacon: boolean
+    applications: ApplicationForOperatorMapping[]
   }
-> = ({
-  operator,
-  isOperatorMappedOnlyInTbtc,
-  isOperatorMappedOnlyInRandomBeacon,
-  closeModal,
-}) => {
+> = ({ applications, closeModal }) => {
   const { account } = useWeb3React()
   const { registerMultipleOperators } =
     useRegisterMultipleOperatorsTransaction()
@@ -71,57 +66,77 @@ const MapOperatorToStakingProviderConfirmationModal: FC<
   const onSuccess = useCallback<OnSuccessCallback>(
     (receipt) => {
       openModal(ModalType.MapOperatorToStakingProviderSuccess, {
-        transactions: [
-          {
-            txHash: receipt.transactionHash,
-            application: {
-              appName: isOperatorMappedOnlyInRandomBeacon
-                ? "tbtc"
-                : "randomBeacon",
-              operator,
-              stakingProvider: account,
-            },
+        transactions: applications.map((app) => ({
+          txHash: receipt.transactionHash,
+          application: {
+            appName: app.appName,
+            operator: app.operator,
+            stakingProvider: app.stakingProvider,
           },
-        ],
+        })),
       })
     },
-    [openModal, operator, account]
+    [openModal, applications]
   )
+  const [errorMessage, setErrorMessage] = useState("")
+  const onError = useCallback((error: Error) => {
+    setErrorMessage(error.message)
+  }, [])
 
   const { sendTransaction: registerOperatorTbtc } =
-    useRegisterOperatorTransaction("tbtc", onSuccess)
+    useRegisterOperatorTransaction(
+      "tbtc",
+      (receipt) => onSuccess(receipt),
+      onError
+    )
   const { sendTransaction: registerOperatorRandomBeacon } =
-    useRegisterOperatorTransaction("randomBeacon", onSuccess)
+    useRegisterOperatorTransaction(
+      "randomBeacon",
+      (receipt) => onSuccess(receipt),
+      onError
+    )
+  const { sendTransaction: registerOperatorTaco } = useBondOperatorTransaction(
+    "taco",
+    (receipt) => onSuccess(receipt),
+    onError
+  )
 
   const submitMappingOperator = async () => {
-    if (isOperatorMappedOnlyInRandomBeacon) {
-      const tx = await registerOperatorTbtc(operator)
-      if (!tx) {
-        openModal(ModalType.TransactionFailed, {
-          error: new Error(
-            "Transaction rejected. You are required to map the Operator Address for both apps."
-          ),
-          closeModal: () => {
-            closeModal()
-            dispatch(mapOperatorToStakingProviderModalClosed())
-          },
-        })
+    if (!account) {
+      throw new Error(`Wallet not connected`)
+    }
+    const transactions = []
+    for (const app of applications) {
+      let transaction
+      switch (app.appName) {
+        case "tbtc":
+          transaction = await registerOperatorTbtc(app.operator)
+          break
+        case "randomBeacon":
+          transaction = await registerOperatorRandomBeacon(app.operator)
+          break
+        case "taco":
+          transaction = await registerOperatorTaco(account, app.operator)
+          break
+        default:
+          throw new Error(`Unsupported app name: ${app.appName}`)
       }
-    } else if (isOperatorMappedOnlyInTbtc) {
-      const tx = await registerOperatorRandomBeacon(operator)
-      if (!tx) {
+      if (!transaction) {
         openModal(ModalType.TransactionFailed, {
           error: new Error(
-            "Transaction rejected. You are required to map the Operator Address for both apps."
+            errorMessage
+              ? `Transaction rejected with error: ${errorMessage}`
+              : `Transaction rejected. You are required to map the Operator Address for ${app.appName}.`
           ),
+          isExpandableError: true,
           closeModal: () => {
             closeModal()
             dispatch(mapOperatorToStakingProviderModalClosed())
           },
         })
+        return
       }
-    } else {
-      await registerMultipleOperators(operator)
+      transactions.push(transaction)
     }
   }
 
@@ -135,26 +150,19 @@ const MapOperatorToStakingProviderConfirmationModal: FC<
           </H5>
           <BodyLg mt="4">
             This will require{" "}
-            {isOperatorMappedOnlyInRandomBeacon || isOperatorMappedOnlyInTbtc
-              ? "1 transaction"
-              : "2 transactions"}
+            {applications.filter((app) => app.operator).length +
+              " transaction(s)"}
             . Each mapping is one transaction
           </BodyLg>
         </InfoBox>
-        {!isOperatorMappedOnlyInTbtc && (
-          <OperatorMappingConfirmation
-            appName="tbtc"
-            operator={operator}
-            stakingProvider={account ? account : AddressZero}
-          />
-        )}
-        {!isOperatorMappedOnlyInRandomBeacon && (
+        {applications.map((app, index) => (
           <OperatorMappingConfirmation
-            appName="random beacon"
-            operator={operator}
+            key={index}
+            appName={app.appName}
+            operator={app.operator}
             stakingProvider={account ? account : AddressZero}
           />
-        )}
+        ))}
       </ModalBody>
       <ModalFooter>
         <Button onClick={closeModal} variant="outline" mr={2}>