Merge branch 'main' into feature/staking-form-ux-improvements

threshold-network · Nov 21, 2023 · 15bb0d8 · 15bb0d8
2 parents 39d49e8 + e6ed52e
commit 15bb0d8
Show file tree

Hide file tree

Showing 78 changed files with 18,084 additions and 3,921 deletions.
diff --git a/.env b/.env
@@ -2,6 +2,7 @@ REACT_APP_SUPPORTED_CHAIN_ID=1337
 REACT_APP_ETH_HOSTNAME_HTTP=http://localhost:8545
 REACT_APP_ETH_HOSTNAME_WS=ws://localhost:8545
 REACT_APP_MULTICALL_ADDRESS=$MULTICALL_ADDRESS
+REACT_APP_DAPP_DEVELOPMENT_TESTNET_CONTRACTS=$DAPP_DEVELOPMENT_TESTNET_CONTRACTS
 
 REACT_APP_FEATURE_FLAG_TBTC_V2=true
 REACT_APP_FEATURE_FLAG_TBTC_V2_REDEMPTION=true

diff --git a/.env.production b/.env.production
@@ -1,6 +1,7 @@
 REACT_APP_SUPPORTED_CHAIN_ID=$CHAIN_ID
 REACT_APP_ETH_HOSTNAME_HTTP=$ETH_HOSTNAME_HTTP
 REACT_APP_ETH_HOSTNAME_WS=$ETH_HOSTNAME_WS
+REACT_APP_DAPP_DEVELOPMENT_TESTNET_CONTRACTS=$DAPP_DEVELOPMENT_TESTNET_CONTRACTS
 
 REACT_APP_FEATURE_FLAG_TBTC_V2=true
 REACT_APP_FEATURE_FLAG_TBTC_V2_REDEMPTION=true

diff --git a/.github/workflows/dashboard-ci.yml b/.github/workflows/dashboard-ci.yml
@@ -29,7 +29,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: "18"
           cache: "yarn"
 
       # This step forces Git to download dependencies using `https://` protocol,
@@ -42,10 +42,7 @@ jobs:
         run: git config --global url."https://".insteadOf git://
 
       - name: Install dependencies
-        run: yarn install --ignore-scripts --frozen-lockfile
-
-      - name: Run token-dashboard post-install script
-        run: yarn run postinstall
+        run: yarn install --frozen-lockfile
 
       - name: Check formatting
         run: yarn format
@@ -58,7 +55,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: "18"
           cache: "yarn"
 
       # We need this step because the `@keep-network/tbtc` which we update in
@@ -77,10 +74,7 @@ jobs:
             @keep-network/keep-ecdsa \
             @keep-network/tbtc \
             @keep-network/coverage-pools \
-            @keep-network/tbtc-v2 \
-            @keep-network/tbtc-v2.ts \
-            @keep-network/ecdsa \
-            @keep-network/random-beacon --ignore-scripts
+            @keep-network/random-beacon
 
       - name: Run postinstall script
         # `yarn upgrade` doesn't trigger the `postinstall` script.

diff --git a/.github/workflows/dashboard-mainnet.yml b/.github/workflows/dashboard-mainnet.yml
@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: "18"
           cache: "yarn"
 
       # This step forces Git to download dependencies using `https://` protocol,
@@ -30,10 +30,7 @@ jobs:
         run: git config --global url."https://".insteadOf git://
 
       - name: Install dependencies
-        run: yarn install --ignore-scripts --frozen-lockfile
-
-      - name: Run token-dashboard post-install script
-        run: yarn run postinstall
+        run: yarn install --frozen-lockfile
 
       # FIXME: It's work in progress, the contracts are not yet published.
       # - name: Resolve latest mainnet contracts

diff --git a/.github/workflows/reusable-build-and-publish.yml b/.github/workflows/reusable-build-and-publish.yml
@@ -88,7 +88,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: "18"
           cache: "yarn"
 
       # We need this step because the `@keep-network/tbtc` which we update in
@@ -102,11 +102,7 @@ jobs:
 
       - name: Install dependencies
         shell: bash
-        run: yarn install --ignore-scripts --frozen-lockfile
-
-      - name: Run token-dashboard post-install script
-        shell: bash
-        run: yarn run postinstall
+        run: yarn install --frozen-lockfile
 
       - name: Get upstream packages versions
         if: inputs.useUpstreamBuilds == true
@@ -128,22 +124,15 @@ jobs:
           if [ ${{ inputs.useUpstreamBuilds }} = 'false' ]; then
             echo "threshold-contracts-version=${{ inputs.dependentPackagesTag }}" >> $GITHUB_OUTPUT
             echo "random-beacon-contracts-version=${{ inputs.dependentPackagesTag }}" >> $GITHUB_OUTPUT
-            echo "ecdsa-contracts-version=${{ inputs.dependentPackagesTag }}" >> $GITHUB_OUTPUT
-            echo "tbtc-v2-contracts-version=${{ inputs.dependentPackagesTag }}" >> $GITHUB_OUTPUT
-            echo "tbtc-v2-ts-version=${{ inputs.dependentPackagesTag }}" >> $GITHUB_OUTPUT
           else
             echo "threshold-contracts-version=${{ steps.upstream-builds-query.outputs.threshold-contracts-version }}" >> $GITHUB_OUTPUT
             echo "random-beacon-contracts-version=${{ steps.upstream-builds-query.outputs.random-beacon-contracts-version }}" >> $GITHUB_OUTPUT
-            echo "ecdsa-contracts-version=${{ steps.upstream-builds-query.outputs.ecdsa-contracts-version }}" >> $GITHUB_OUTPUT
-            echo "tbtc-v2-contracts-version=${{ steps.upstream-builds-query.outputs.tbtc-v2-contracts-version }}" >> $GITHUB_OUTPUT
-            echo "tbtc-v2-ts-version=${{ steps.upstream-builds-query.outputs.tbtc-v2-ts-version }}" >> $GITHUB_OUTPUT
           fi
 
       # Currently we only support `environment` = `goerli`. We provide explicit
       # version of the `keep-core` package, because using `goerli` tag results
       # in `expected manifest` error - probably caused by bug in Yarn:
       # https://github.com/yarnpkg/yarn/issues/4731.
-
       - name: Resolve contracts
         shell: bash
         run: |
@@ -153,11 +142,7 @@ jobs:
             @keep-network/keep-ecdsa@${{ inputs.environment }} \
             @keep-network/tbtc@${{ inputs.environment }} \
             @keep-network/coverage-pools@${{ inputs.environment }} \
-            @keep-network/ecdsa@${{ steps.set-packages-versions.outputs.ecdsa-contracts-version }} \
             @keep-network/random-beacon@${{ steps.set-packages-versions.outputs.random-beacon-contracts-version }} \
-            @keep-network/tbtc-v2@${{ steps.set-packages-versions.outputs.tbtc-v2-contracts-version }} \
-            @keep-network/tbtc-v2.ts@${{ inputs.environment }}
-
       - name: Run postinstall script
         shell: bash
         # `yarn upgrade` doesn't trigger the `postinstall` script.
@@ -184,6 +169,7 @@ jobs:
           SENTRY_SUPPORT: true
           SENTRY_DSN: ${{ secrets.sentryDsn }}
           WALLET_CONNECT_PROJECT_ID: ${{ secrets.walletConnectProjectId }}
+          DAPP_DEVELOPMENT_TESTNET_CONTRACTS: ${{ inputs.preview == true }}
 
       - name: Build
         if: inputs.gcpBucketPath != '.'
@@ -201,6 +187,7 @@ jobs:
           SENTRY_SUPPORT: true
           SENTRY_DSN: ${{ secrets.sentryDsn }}
           WALLET_CONNECT_PROJECT_ID: ${{ secrets.walletConnectProjectId }}
+          DAPP_DEVELOPMENT_TESTNET_CONTRACTS: ${{ inputs.preview == true }}
 
       - name: Deploy to GCP
         uses: thesis/[email protected]

diff --git a/.lintstagedrc b/.lintstagedrc
@@ -1,3 +1,3 @@
 {
-  "*.{js,ts,tsx}": yarn format:fix,
-}
+  "*.{js,ts,tsx}": "yarn format:fix"
+}
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+18
diff --git a/craco.config.js b/craco.config.js
@@ -3,6 +3,11 @@ module.exports = {
     plugins: [
       "@babel/plugin-proposal-nullish-coalescing-operator",
       "@babel/plugin-proposal-optional-chaining",
+      /*
+       * Installed "@babel/plugin-transform-class-properties" to resolve
+       * ECPair library error used by "@keep-network/tbtc-v2.ts"
+       */
+      ["@babel/plugin-transform-class-properties", { loose: true }],
     ],
   },
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,10 @@
 {
   "name": "token-dashboard",
-  "version": "1.12.0-pre",
+  "version": "1.13.0-pre",
   "private": true,
+  "engines": {
+    "node": ">=16"
+  },
   "dependencies": {
     "@chakra-ui/icons": "^1.0.15",
     "@chakra-ui/react": "^1.6.7",
@@ -12,13 +15,11 @@
     "@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/tbtc-v2.ts": "1.3.0-dev.9",
+    "@keep-network/tbtc-v2.ts": "^2.3.0",
     "@ledgerhq/connect-kit-loader": "^1.1.2",
     "@reduxjs/toolkit": "^1.6.1",
     "@rehooks/local-storage": "^2.4.4",
@@ -65,9 +66,9 @@
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "craco start",
+    "start": "craco --openssl-legacy-provider start",
     "start:dev": ". ./scripts/start_dashboard.sh",
-    "build": "craco build",
+    "build": "craco --openssl-legacy-provider build",
     "test": "craco test",
     "eject": "react-scripts eject",
     "lint": "eslint --ext .js --ext .ts --ext .tsx .",
@@ -78,7 +79,7 @@
     "prepare": "husky install",
     "chromatic": "npx chromatic --exit-zero-on-changes",
     "cypress:open": "cypress open",
-    "gen:theme-typings": "chakra-cli tokens ./src/theme/index.ts",
+    "gen:theme-typings": "chakra-cli tokens ./src/theme/index.ts --out node_modules/@chakra-ui/styled-system/dist/declarations/src/theming.types.d.ts",
     "postinstall": "npm run gen:theme-typings",
     "add-components-lib": ". ./scripts/rebuild_components_package.sh"
   },
@@ -102,7 +103,8 @@
     "@tenderly/hardhat-tenderly": ">=1.0.12 <1.1.0"
   },
   "devDependencies": {
-    "@chakra-ui/cli": "0.0.0-pr-20211126153854",
+    "@babel/plugin-transform-class-properties": "^7.22.5",
+    "@chakra-ui/cli": "2",
     "@craco/craco": "6.4.5",
     "@keep-network/prettier-config-keep": "github:keep-network/prettier-config-keep#d6ec02e",
     "@testing-library/react-hooks": "7.0.2",

diff --git a/src/components/Link/SharedLinks.tsx b/src/components/Link/SharedLinks.tsx
@@ -16,11 +16,11 @@ export const StakingContractLearnMore: FC<StakingContractLearnMoreProps> = (
   if (tStakingContract?.address) {
     return (
       <BodySm color={color} textAlign="center" {...props}>
-        Read more about the&nbsp;
+        Read the{" "}
         <ViewInBlockExplorer
           id={tStakingContract.address}
           type={ExplorerDataType.ADDRESS}
-          text="staking contract."
+          text="Threshold Staking Contract."
         />
       </BodySm>
     )

diff --git a/src/components/Modal/ModalCloseButton.tsx b/src/components/Modal/ModalCloseButton.tsx
@@ -1,8 +1,11 @@
 import { FC } from "react"
-import { ModalCloseButton as _ModalCloseButton } from "@threshold-network/components"
+import {
+  ModalCloseButton as _ModalCloseButton,
+  CloseButtonProps,
+} from "@threshold-network/components"
 
-const ModalCloseButton: FC = () => {
-  return <_ModalCloseButton className="ph-no-capture" />
+const ModalCloseButton: FC<CloseButtonProps> = (props) => {
+  return <_ModalCloseButton className="ph-no-capture" {...props} />
 }
 
 export default ModalCloseButton
diff --git a/src/components/Modal/StakingChecklistModal/index.tsx b/src/components/Modal/StakingChecklistModal/index.tsx
@@ -1,15 +1,18 @@
 import { FC } from "react"
 import {
+  BodyLg,
+  FlowStepStatus,
+  H5,
+  Alert,
+  AlertDescription,
+  AlertIcon,
   Button,
   Divider,
-  Flex,
   ModalBody,
   ModalFooter,
   ModalHeader,
-  Stack,
   useColorModeValue,
-} from "@chakra-ui/react"
-import { BodyLg, BodySm, H5 } from "@threshold-network/components"
+} from "@threshold-network/components"
 import withBaseModal from "../withBaseModal"
 import { useModal } from "../../../hooks/useModal"
 import { BaseModalProps } from "../../../types"
@@ -28,29 +31,27 @@ const StakingChecklistModal: FC<BaseModalProps & { stakeAmount: string }> = ({
   return (
     <>
       <ModalHeader display="flex" alignItems="baseline">
-        <H5 mr={2}>Stake Tokens</H5>
-        <BodySm>(Step 1)</BodySm>
+        <H5 mr={2}>Staking timeline</H5>
       </ModalHeader>
-      <ModalCloseButton />
-      <ModalBody>
-        <Stack spacing={6}>
-          <InfoBox variant="modal">
-            <BodyLg color={useColorModeValue("gray.700", "white")} as="span">
-              <H5 mb={4}>Staking in Threshold requires running a node</H5>
-              <BodyLg>
-                Please review the staking timeline below for a handy overview of
-                the staking requirements.
-              </BodyLg>
-            </BodyLg>
-          </InfoBox>
-          <Divider />
-          <StakingTimeline />
-          <StakingContractLearnMore mt="4rem !important" />
-          <Divider />
-        </Stack>
+      <ModalCloseButton top="3" />
+      <ModalBody py="0">
+        <InfoBox variant="modal">
+          <H5 as="p" color={useColorModeValue("gray.700", "white")}>
+            Review the timeline carefully for an overview of the requirements.
+          </H5>
+        </InfoBox>
+        <StakingTimeline mt="4" statuses={[FlowStepStatus.inactive]} />
+        <Alert status="warning" mt="6">
+          <AlertIcon />
+          <AlertDescription color={useColorModeValue("gray.700", "white")}>
+            Staking in Threshold requires running a node.
+          </AlertDescription>
+        </Alert>
+        <StakingContractLearnMore mt="10" mb="4" />
+        <Divider />
       </ModalBody>
-      <ModalFooter>
-        <Button onClick={closeModal} variant="outline" mr={2}>
+      <ModalFooter p="6">
+        <Button onClick={closeModal} variant="outline" mr={3}>
           Cancel
         </Button>
         <Button