WIP: Replace PRE with TACo when staking

.env

@@ -1,6 +1,6 @@
-REACT_APP_SUPPORTED_CHAIN_ID=1337
-REACT_APP_ETH_HOSTNAME_HTTP=http://localhost:8545
-REACT_APP_ETH_HOSTNAME_WS=ws://localhost:8545
+REACT_APP_SUPPORTED_CHAIN_ID=5
+REACT_APP_ETH_HOSTNAME_HTTP=https://goerli.infura.io/v3/663d60ae0f504f168b362c2bda60f81c
+REACT_APP_ETH_HOSTNAME_WS=wss://goerli.infura.io/v3/663d60ae0f504f168b362c2bda60f81c
 REACT_APP_MULTICALL_ADDRESS=$MULTICALL_ADDRESS
 
 REACT_APP_FEATURE_FLAG_TBTC_V2=true
@@ -9,12 +9,11 @@ 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_FEATURE_FLAG_LEDGER_LIVE=true
 REACT_APP_SENTRY_DSN=$SENTRY_DSN
 
-REACT_APP_ELECTRUM_PROTOCOL=$ELECTRUM_PROTOCOL
-REACT_APP_ELECTRUM_HOST=$ELECTRUM_HOST
-REACT_APP_ELECTRUM_PORT=$ELECTRUM_PORT
-REACT_APP_MOCK_BITCOIN_CLIENT=true
+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

.gitignore

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

Dockerfile

@@ -0,0 +1,23 @@
+FROM node:14-buster-slim
+
+WORKDIR /app
+
+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
+
+ENV PYTHON /usr/bin/python3
+
+COPY package*.json yarn.lock ./
+
+RUN yarn cache clean && yarn install
+
+COPY . .
+
+ENV NODE_OPTIONS=--max_old_space_size=3072
+RUN yarn build
+
+EXPOSE 3000
+
+CMD ["yarn", "start"]

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
+```
+

package.json

@@ -11,14 +11,16 @@
     "@ethersproject/constants": "^5.5.0",
     "@fontsource/ibm-plex-mono": "^4.5.13",
     "@fontsource/inter": "^4.5.10",
-    "@keep-network/coverage-pools": "development",
-    "@keep-network/ecdsa": "development",
-    "@keep-network/keep-core": "development",
-    "@keep-network/keep-ecdsa": "development",
-    "@keep-network/random-beacon": "development",
-    "@keep-network/tbtc": "development",
-    "@keep-network/tbtc-v2": "development",
+    "@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",
     "@ledgerhq/connect-kit-loader": "^1.1.2",
     "@reduxjs/toolkit": "^1.6.1",
     "@rehooks/local-storage": "^2.4.4",
@@ -27,8 +29,6 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "@threshold-network/components": "development",
-    "@threshold-network/solidity-contracts": "development",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.9.1",
     "@types/numeral": "^2.0.2",

src/components/Modal/MapOperatorToStakingProviderConfirmationModal/index.tsx

@@ -60,6 +60,7 @@ const MapOperatorToStakingProviderConfirmationModal: FC<
   operator,
   isOperatorMappedOnlyInTbtc,
   isOperatorMappedOnlyInRandomBeacon,
+  isOperatorMappedOnlyInTaco,
   closeModal,
 }) => {
   const { account } = useWeb3React()
@@ -155,6 +156,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/index.tsx

@@ -90,7 +90,7 @@ 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>

src/enums/externalHref.ts

@@ -20,6 +20,7 @@ export enum ExternalHref {
   infStones = "https://infstones.com/",
   setupNodes = "https://docs.threshold.network/guides/threshold-applications/tbtc-v2-client-setup",
   tbtcNodeDocs = "https://docs.threshold.network/guides/threshold-applications/tbtc-v2-client-setup",
+  tacoNodeDocs = "https://docs.threshold.network/applications/threshold-access-control",
   randomBeaconNodeDocs = "https://docs.threshold.network/guides/threshold-applications/tbtc-v2-client-setup",
   analyticsReports = "SOME_URL",
   btcRecoveryAddress = "https://github.com/keep-network/tbtc-v2/blob/main/docs/rfc/rfc-1.adoc",

src/pages/Staking/AuthorizeStakingApps/index.tsx

@@ -46,27 +46,28 @@ const AuthorizeStakingAppsPage: FC = () => {
   const { openModal } = useModal()
   const tbtcAppFormRef = useRef<FormikProps<FormValues>>(null)
   const randomBeaconAppFormRef = useRef<FormikProps<FormValues>>(null)
-  const preAppFormRef = useRef<FormikProps<FormValues>>(null)
+  const tacoAppFormRef = useRef<FormikProps<FormValues>>(null)
   const stakinAppNameToFormRef: Record<
     AppAuthDataProps["stakingAppId"],
     RefObject<FormikProps<FormValues>>
   > = {
     tbtc: tbtcAppFormRef,
     randomBeacon: randomBeaconAppFormRef,
-    pre: preAppFormRef,
+    taco: tacoAppFormRef,
   }
 
   const dispatch = useAppDispatch()
 
   const tbtcAppAddress = useStakingApplicationAddress("tbtc")
   const randomBeaconAddress = useStakingApplicationAddress("randomBeacon")
+  const TACoAddress = useStakingApplicationAddress("taco")
   const stakinAppNameToAddress: Record<
     AppAuthDataProps["stakingAppId"],
     string
   > = {
     tbtc: tbtcAppAddress,
     randomBeacon: randomBeaconAddress,
-    pre: AddressZero,
+    taco: TACoAddress,
   }
 
   useEffect(() => {
@@ -91,6 +92,10 @@ const AuthorizeStakingAppsPage: FC = () => {
     "randomBeacon",
     stakingProviderAddress || AddressZero
   )
+  const TACoApp = useStakingAppDataByStakingProvider(
+    "taco",
+    stakingProviderAddress || AddressZero
+  )
 
   const appsAuthData: {
     [appName: string]: AppAuthDataProps & { address?: string }
@@ -108,9 +113,10 @@ const AuthorizeStakingAppsPage: FC = () => {
       label: "Random Beacon",
     },
     pre: {
-      stakingAppId: "pre",
-      label: "PRE",
-      status: "authorization-not-required",
+      ...TACoApp,
+      stakingAppId: "taco",
+      label: "TACo",
+      address: TACoAddress,
     },
   }
 
@@ -285,10 +291,10 @@ const AuthorizeStakingAppsPage: FC = () => {
             />
             <AuthorizeApplicationsCardCheckbox
               mt={5}
-              appAuthData={appsAuthData.pre}
+              appAuthData={appsAuthData.taco}
               totalInTStake={stake.totalInTStake}
               onCheckboxClick={onCheckboxClick}
-              isSelected={isAppSelected("pre")}
+              isSelected={isAppSelected("taco")}
               maxAuthAmount={stake.totalInTStake}
               minAuthAmount={"0"}
               stakingProvider={stakingProviderAddress!}

src/pages/Staking/HowItWorks/StakingApplications/index.tsx

@@ -16,6 +16,8 @@ import randomBeaconAppIllustrationLight from "../../../../static/images/randomBe
 import randomBeaconAppIllustrationDark from "../../../../static/images/randomBeaconAppIllustrationDark.png"
 import preAppIllustrationLight from "../../../../static/images/preAppIllustrationLight.png"
 import preAppIllustrationDark from "../../../../static/images/preAppIllustrationDark.png"
+// import tacoAppIllustrationLight from "../../../../static/images/tacoAppIllustrationLight.png"
+// import tacoAppIllustrationDark from "../../../../static/images/tacoAppIllustrationDark.png"
 import listIconStarLight from "../../../../static/images/ListIconStarLight.png"
 import listIconStarDark from "../../../../static/images/ListIconStarDark.png"
 import listIconStockLight from "../../../../static/images/ListIconStockLight.png"
@@ -31,7 +33,6 @@ import { Link as RouterLink } from "react-router-dom"
 import { ColorMode, List, ListItem, useColorMode } from "@chakra-ui/react"
 import ButtonLink from "../../../../components/ButtonLink"
 
-const preNodeSteps = ["Run a PRE node", "Have a staked balance"]
 const randomBeaconNodeSteps = [
   "Run a Random Beacon node",
   "Authorize a portion of your stake to Random Beacon",
@@ -42,6 +43,11 @@ const tbtcNodeSteps = [
   "Authorize a portion of your stake to tBTC",
   "Have a staked balance",
 ]
+const tacoNodeSteps = [
+  "Run a TACO node",
+  "Authorize a portion of your stake to TACO",
+  "Have a staked balance",
+]
 
 const iconMap: { [iconName: string]: Record<ColorMode, string> } = {
   star: { light: listIconStarLight, dark: listIconStarDark },
@@ -55,14 +61,14 @@ const iconMap: { [iconName: string]: Record<ColorMode, string> } = {
     light: tbtcAppIllustrationLight,
     dark: tbtcAppIllustrationDark,
   },
-  pre: {
-    light: preAppIllustrationLight,
-    dark: preAppIllustrationDark,
-  },
   randomBeacon: {
     light: randomBeaconAppIllustrationLight,
     dark: randomBeaconAppIllustrationDark,
   },
+  taco: {
+    light: preAppIllustrationLight,
+    dark: preAppIllustrationDark,
+  },
 }
 
 const StakingApplications: PageComponent = () => {
@@ -144,6 +150,28 @@ const StakingApplications: PageComponent = () => {
           }
           rewardSteps={tbtcNodeSteps}
         />
+        <ApplicationDetailsCard
+          preTitle="TACO APP"
+          title="TACo is an access control plug-in that makes your Web3 application more secure, more private, and much more decentralized."
+          description="TACo is a plug-in service that enables the sharing of any form of private or sensitive data within Web3 applications. Private data is encrypted by a data owner and remains encrypted until it reaches the device of a recipient."
+          imgSrc={iconMap.taco[colorMode]}
+          ctaButtons={
+            <VStack mb={6}>
+              <ButtonLink to="/staking" isFullWidth>
+                Authorize TACO
+              </ButtonLink>
+              <ButtonLink
+                isExternal
+                href={ExternalHref.tacoNodeDocs}
+                isFullWidth
+                variant="outline"
+              >
+                TACO Node Docs
+              </ButtonLink>
+            </VStack>
+          }
+          rewardSteps={tacoNodeSteps}
+        />
         <ApplicationDetailsCard
           preTitle="Random Beacon APP"
           title="Random Beacon is a threshold relay that can generate verifiable randomness."
@@ -166,24 +194,6 @@ const StakingApplications: PageComponent = () => {
           }
           rewardSteps={randomBeaconNodeSteps}
         />
-        <ApplicationDetailsCard
-          preTitle="PRE APP"
-          title="Proxy Re-Encryption, or PRE, is cryptographic middleware for developing privacy-preserving applications."
-          description="PRE is a scalable end-to-end encryption protocol that allows a proxy entity to transform (or re-encrypt) encrypted data from one encryption key to another, without revealing the plaintext data. The nodes on the Threshold Network act as these proxy entities and use threshold cryptography to securely and cooperatively re-encrypt data for recipients based on access conditions defined by the data owner. "
-          imgSrc={iconMap.pre[colorMode]}
-          ctaButtons={
-            <ButtonLink
-              isExternal
-              href={ExternalHref.preNodeSetup}
-              mb={6}
-              isFullWidth
-              variant="outline"
-            >
-              PRE Node Docs
-            </ButtonLink>
-          }
-          rewardSteps={preNodeSteps}
-        />
       </Stack>
     </Card>
   )

src/pages/Staking/StakeCard/StakeApplications/index.tsx

@@ -15,20 +15,25 @@ const StakeApplications: FC<{ stakingProvider: string }> = ({
     "randomBeacon",
     stakingProvider
   )
+  const tacoApp = useStakingAppDataByStakingProvider("taco", stakingProvider)
   const isTbtcFetching = useAppSelector(
     (state) => state.applications.tbtc.stakingProviders.isFetching
   )
   const isRandomBeaconFetching = useAppSelector(
     (state) => state.applications.randomBeacon.stakingProviders.isFetching
   )
+  const isTacoFetching = useAppSelector(
+    (state) => state.applications.taco.stakingProviders.isFetching
+  )
 
   const { isInactiveStake } = useStakeCardContext()
 
   return (
     <Box>
       <BodyMd mb="4">Applications</BodyMd>
-      {(!tbtcApp.isAuthorized || !randomBeaconApp.isAuthorized) &&
+      {(!tbtcApp.isAuthorized || !randomBeaconApp.isAuthorized || !tacoApp.isAuthorized) &&
         !isTbtcFetching &&
+        !isTacoFetching &&
         !isRandomBeaconFetching && <BundledRewardsAlert mb="4" />}
       <List spacing={4}>
         <AuthorizeApplicationRow
@@ -47,9 +52,9 @@ const StakeApplications: FC<{ stakingProvider: string }> = ({
         />
         <AuthorizeApplicationRow
           as="li"
-          label="PRE"
-          isAuthorized={true}
-          percentage={isInactiveStake ? 0 : 100}
+          label="TACo"
+          isAuthorized={tacoApp.isAuthorized}
+          percentage={tacoApp.percentage}
           stakingProvider={stakingProvider}
         />
       </List>