Integrate TacoApplication and Dockerize Development

.gitignore

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

Dockerfile.dev

@@ -0,0 +1,22 @@
+# Use the specified image
+FROM node:14-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 yarn install
+
+# Expose port 3000
+EXPOSE 3000

README.md

@@ -114,3 +114,53 @@ 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 `package.json` to contain:
+
+```json
+    "@keep-network/coverage-pools": "goerli",
+    "@keep-network/ecdsa": "goerli",
+    "@keep-network/keep-core": "1.8.1-goerli.0",
+    "@keep-network/keep-ecdsa": "goerli",
+    "@keep-network/random-beacon": "goerli",
+    "@keep-network/tbtc": "goerli",
+    "@keep-network/tbtc-v2": "goerli",
+    "@keep-network/tbtc-v2.ts": "development",
+    "@threshold-network/components": "development",
+    "@threshold-network/solidity-contracts": "goerli",
+```
+
+Update `.env` to contain:
+
+```
+REACT_APP_SUPPORTED_CHAIN_ID=5
+REACT_APP_ETH_HOSTNAME_HTTP=https://goerli.infura.io/v3/<your API key here>
+REACT_APP_ETH_HOSTNAME_WS=wss://goerli.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
+```
+
+Then build the docker container and run the dashboard:
+
+```bash
+docker build -t dashboard:latest .
+docker run -p 3000:3000 -d dashboard
+```
+

docker-compose.yml

@@ -0,0 +1,19 @@
+version: "3.8"
+
+services:
+  threshold-dashboard:
+    image: node:14-buster-slim
+    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

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 transaction"
+              : "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

@@ -32,7 +32,8 @@ const validateInputtedOperatorAddress = async (
     operator: string
   ) => Promise<boolean>,
   mappedOperatorTbtc: string,
-  mappedOperatorRandomBeacon: string
+  mappedOperatorRandomBeacon: string,
+  mappedOperatorTaco: string
 ): Promise<string | undefined> => {
   let validationMsg: string | undefined = ""
 
@@ -46,11 +47,18 @@ const validateInputtedOperatorAddress = async (
 
     const isOperatorMappedOnlyInTbtc =
       !isAddressZero(mappedOperatorTbtc) &&
-      isAddressZero(mappedOperatorRandomBeacon)
+      isAddressZero(mappedOperatorRandomBeacon) &&
+      isAddressZero(mappedOperatorTaco)
 
     const isOperatorMappedOnlyInRandomBeacon =
       isAddressZero(mappedOperatorTbtc) &&
-      !isAddressZero(mappedOperatorRandomBeacon)
+      !isAddressZero(mappedOperatorRandomBeacon) &&
+      isAddressZero(mappedOperatorTaco)
+
+    const isOperatorMappedOnlyInTaco =
+      isAddressZero(mappedOperatorTbtc) &&
+      isAddressZero(mappedOperatorRandomBeacon) &&
+      !isAddressZero(mappedOperatorTaco)
 
     if (
       isOperatorMappedOnlyInRandomBeacon &&
@@ -66,6 +74,13 @@ 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
@@ -78,6 +93,7 @@ type MapOperatorToStakingProviderFormProps = {
   initialAddress: string
   mappedOperatorTbtc: string
   mappedOperatorRandomBeacon: string
+  mappedOperatorTaco: string
   innerRef: Ref<FormikProps<MapOperatorToStakingProviderFormValues>>
   checkIfOperatorIsMappedToAnotherStakingProvider: (
     operator: string
@@ -96,6 +112,7 @@ const MapOperatorToStakingProviderForm = withFormik<
     const {
       mappedOperatorTbtc,
       mappedOperatorRandomBeacon,
+      mappedOperatorTaco,
       checkIfOperatorIsMappedToAnotherStakingProvider,
     } = props
     const errors: FormikErrors<MapOperatorToStakingProviderFormValues> = {}
@@ -106,7 +123,8 @@ const MapOperatorToStakingProviderForm = withFormik<
         values.operator,
         checkIfOperatorIsMappedToAnotherStakingProvider,
         mappedOperatorTbtc,
-        mappedOperatorRandomBeacon
+        mappedOperatorRandomBeacon,
+        mappedOperatorTaco
       )
     }
 

src/components/Modal/MapOperatorToStakingProviderModal/index.tsx

@@ -36,6 +36,7 @@ import ModalCloseButton from "../ModalCloseButton"
 export interface MapOperatorToStakingProviderModalProps {
   mappedOperatorTbtc: string
   mappedOperatorRandomBeacon: string
+  mappedOperatorTaco: string
 }
 
 const MapOperatorToStakingProviderModal: FC<
@@ -50,8 +51,10 @@ const MapOperatorToStakingProviderModal: FC<
   const {
     mappedOperatorTbtc,
     mappedOperatorRandomBeacon,
+    mappedOperatorTaco,
     isOperatorMappedOnlyInRandomBeacon,
     isOperatorMappedOnlyInTbtc,
+    isOperatorMappedOnlyInTaco,
   } = useAppSelector(selectMappedOperators)
 
   const onSubmit = async ({
@@ -62,6 +65,7 @@ const MapOperatorToStakingProviderModal: FC<
         operator,
         isOperatorMappedOnlyInTbtc,
         isOperatorMappedOnlyInRandomBeacon,
+        isOperatorMappedOnlyInTaco,
       })
     }
   }
@@ -90,7 +94,9 @@ const MapOperatorToStakingProviderModal: FC<
       <ModalCloseButton />
       <ModalBody>
         <InfoBox variant="modal">
-          {isOperatorMappedOnlyInRandomBeacon || isOperatorMappedOnlyInTbtc ? (
+          {isOperatorMappedOnlyInRandomBeacon ||
+          isOperatorMappedOnlyInTbtc ||
+          isOperatorMappedOnlyInTaco ? (
             <H5>
               We noticed you've only mapped 1 application's Operator Address.
             </H5>
@@ -122,7 +128,7 @@ const MapOperatorToStakingProviderModal: FC<
           ) : isOperatorMappedOnlyInTbtc ? (
             <LabelSm>random beacon app</LabelSm>
           ) : (
-            <LabelSm>tBTC + Random Beacon apps (requires 2txs)</LabelSm>
+            <LabelSm>tBTC + Random Beacon + TACo (requires 3txs)</LabelSm>
           )}
           <StakeAddressInfo stakingProvider={account ? account : AddressZero} />
           <MapOperatorToStakingProviderForm
@@ -133,6 +139,8 @@ const MapOperatorToStakingProviderModal: FC<
                 ? mappedOperatorRandomBeacon
                 : isOperatorMappedOnlyInTbtc
                 ? mappedOperatorTbtc
+                : isOperatorMappedOnlyInTaco
+                ? mappedOperatorTaco
                 : ""
             }
             onSubmitForm={onSubmit}
@@ -141,6 +149,7 @@ const MapOperatorToStakingProviderModal: FC<
             }
             mappedOperatorTbtc={mappedOperatorTbtc}
             mappedOperatorRandomBeacon={mappedOperatorRandomBeacon}
+            mappedOperatorTaco={mappedOperatorTaco}
           />
         </Box>
         <AlertBox

src/components/Modal/NewStakerAuthorizeStakingApplicationModal/NewStakerAuthorizationForm.tsx

@@ -22,6 +22,8 @@ export type FormValues = {
   isTbtcChecked: boolean
   randomBeaconAmountToAuthorize: string | number
   isRandomBeaconChecked: boolean
+  tacoAmountToAuthorize: string | number
+  isTacoChecked: boolean
 }
 
 export interface AuthInputConstraints {
@@ -33,6 +35,7 @@ interface Props {
   onSubmitForm: (values: FormValues) => void
   tbtcInputConstraints: AuthInputConstraints
   randomBeaconInputConstraints: AuthInputConstraints
+  tacoInputConstraints: AuthInputConstraints
 }
 
 export const formikWrapper = withFormik<Props, FormValues>({
@@ -44,6 +47,8 @@ export const formikWrapper = withFormik<Props, FormValues>({
     isTbtcChecked: true,
     randomBeaconAmountToAuthorize: props.randomBeaconInputConstraints.max,
     isRandomBeaconChecked: true,
+    tacoAmountToAuthorize: props.tacoInputConstraints.max,
+    isTacoChecked: true,
   }),
   validate: (values, props) => {
     const errors: FormikErrors<FormValues> = {}
@@ -59,6 +64,12 @@ export const formikWrapper = withFormik<Props, FormValues>({
       props.randomBeaconInputConstraints.max.toString(),
       props.randomBeaconInputConstraints.min.toString()
     )
+
+    errors.tacoAmountToAuthorize = validateAmountInRange(
+      values?.tacoAmountToAuthorize?.toString(),
+      props.tacoInputConstraints.max.toString(),
+      props.tacoInputConstraints.min.toString()
+    )
     return getErrorsObj(errors)
   },
   displayName: "AuthorizationForm",
@@ -67,11 +78,13 @@ export const formikWrapper = withFormik<Props, FormValues>({
 const NewStakerAuthorizationForm: FC<Props & FormikProps<FormValues>> = ({
   tbtcInputConstraints,
   randomBeaconInputConstraints,
+  tacoInputConstraints,
   handleSubmit,
 }) => {
   const { closeModal } = useModal()
   const [, { value: isTbtcChecked }] = useField("isTbtcChecked")
   const [, { value: isRandomBeaconChecked }] = useField("isRandomBeaconChecked")
+  const [, { value: isTacoChecked }] = useField("isTacoChecked")
   const bothAppsChecked = isTbtcChecked && isRandomBeaconChecked
 
   return (
@@ -104,21 +117,26 @@ const NewStakerAuthorizationForm: FC<Props & FormikProps<FormValues>> = ({
             </BodyXs>
           </Alert>
         )}
+        <NewStakerAuthorizationCard
+          stakingAppName="taco"
+          min={tacoInputConstraints.min}
+          max={tacoInputConstraints.max}
+          inputId="tacoAmountToAuthorize"
+          checkBoxId="isTacoChecked"
+          label="TACo"
+          mb={6}
+        />
       </Box>
-      <Card bg="gray.50" boxShadow="none" mb={6}>
-        <HStack justifyContent="space-between">
-          <LabelMd color="gray.500">PRE</LabelMd>
-          <Badge variant={"subtle"} colorScheme="gray" color={"gray.500"}>
-            Authorization not required
-          </Badge>
-        </HStack>
-      </Card>
       <HStack mb={6} justifyContent="flex-end">
         <Button onClick={closeModal} variant="outline" mr={2}>
           Cancel
         </Button>
         <Button
-          disabled={isTbtcChecked === false && isRandomBeaconChecked === false}
+          disabled={
+            isTbtcChecked === false &&
+            isRandomBeaconChecked === false &&
+            isTacoChecked === false
+          }
           type="submit"
         >
           Authorize Selected Apps