Merge pull request #785 from threshold-network/add-support-to-multiple-networks

Added multi-network support, including updated environment variables, network-specific explorer links, refactored contract integrations and connector handling, and enhanced local storage and minting flow for multi-network compatibility. Fixed ledger and subgraph issues, and centralized network logic.

Author: evandrosaturnino

.env.example

@@ -1,6 +1,5 @@
-REACT_APP_SUPPORTED_CHAIN_ID=1337
-REACT_APP_ETH_HOSTNAME_HTTP=http://localhost:8545
-REACT_APP_ETH_HOSTNAME_WS=ws://localhost:8545
+REACT_APP_DEFAULT_PROVIDER_CHAIN_ID=1337
+REACT_APP_ALCHEMY_API=$ALCHEMY_API
 REACT_APP_MULTICALL_ADDRESS=$MULTICALL_ADDRESS
 REACT_APP_DAPP_DEVELOPMENT_TESTNET_CONTRACTS=$DAPP_DEVELOPMENT_TESTNET_CONTRACTS
 
@@ -19,11 +18,16 @@ REACT_APP_FEATURE_FLAG_SENTRY=false
 REACT_APP_SENTRY_DSN=$SENTRY_DSN
 REACT_APP_FEATURE_FLAG_TRM=false
 
-REACT_APP_ELECTRUM_PROTOCOL=$ELECTRUM_PROTOCOL
-REACT_APP_ELECTRUM_HOST=$ELECTRUM_HOST
-REACT_APP_ELECTRUM_PORT=$ELECTRUM_PORT
+REACT_APP_MAINNET_ELECTRUM_PROTOCOL=$MAINNET_ELECTRUM_PROTOCOL
+REACT_APP_MAINNET_ELECTRUM_HOST=$MAINNET_ELECTRUM_HOST
+REACT_APP_MAINNET_ELECTRUM_PORT=$MAINNET_ELECTRUM_PORT
+REACT_APP_TESTNET_ELECTRUM_PROTOCOL=$TESTNET_ELECTRUM_PROTOCOL
+REACT_APP_TESTNET_ELECTRUM_HOST=$TESTNET_ELECTRUM_HOST
+REACT_APP_TESTNET_ELECTRUM_PORT=$TESTNET_ELECTRUM_PORT
 REACT_APP_MOCK_BITCOIN_CLIENT=true
 
 REACT_APP_WALLET_CONNECT_PROJECT_ID=$WALLET_CONNECT_PROJECT_ID
 
+REACT_APP_TBTC_SUBGRAPH_API=$TBTC_SUBGRAPH_API
+
 REACT_APP_TACO_DOMAIN=dashboard

.env.production

@@ -1,6 +1,5 @@
-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_DEFAULT_PROVIDER_CHAIN_ID=$CHAIN_ID
+REACT_APP_ALCHEMY_API=$ALCHEMY_API
 REACT_APP_DAPP_DEVELOPMENT_TESTNET_CONTRACTS=$DAPP_DEVELOPMENT_TESTNET_CONTRACTS
 
 REACT_APP_FEATURE_FLAG_TBTC_V2=true
@@ -20,10 +19,16 @@ REACT_APP_FEATURE_FLAG_SENTRY=$SENTRY_SUPPORT
 REACT_APP_SENTRY_DSN=$SENTRY_DSN
 REACT_APP_FEATURE_FLAG_TRM=$TRM_SUPPORT
 
-REACT_APP_ELECTRUM_PROTOCOL=$ELECTRUM_PROTOCOL
-REACT_APP_ELECTRUM_HOST=$ELECTRUM_HOST
-REACT_APP_ELECTRUM_PORT=$ELECTRUM_PORT
+REACT_APP_MAINNET_ELECTRUM_PROTOCOL=$MAINNET_ELECTRUM_PROTOCOL
+REACT_APP_MAINNET_ELECTRUM_HOST=$MAINNET_ELECTRUM_HOST
+REACT_APP_MAINNET_ELECTRUM_PORT=$MAINNET_ELECTRUM_PORT
+REACT_APP_TESTNET_ELECTRUM_PROTOCOL=$TESTNET_ELECTRUM_PROTOCOL
+REACT_APP_TESTNET_ELECTRUM_HOST=$TESTNET_ELECTRUM_HOST
+REACT_APP_TESTNET_ELECTRUM_PORT=$TESTNET_ELECTRUM_PORT
 REACT_APP_MOCK_BITCOIN_CLIENT=false
 
 REACT_APP_WALLET_CONNECT_PROJECT_ID=$WALLET_CONNECT_PROJECT_ID
+
+REACT_APP_TBTC_SUBGRAPH_API=$TBTC_SUBGRAPH_API
+
 REACT_APP_TACO_DOMAIN=mainnet

.env.test

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

README.md

@@ -11,9 +11,8 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 ## Update the `.env` file:
 
 ```
-REACT_APP_SUPPORTED_CHAIN_ID=11155111
-REACT_APP_ETH_HOSTNAME_HTTP=<your http ETH hostname- eg. Infura>
-REACT_APP_ETH_HOSTNAME_WS=<your ws ETH hostname- eg. Infura>
+REACT_APP_DEFAULT_PROVIDER_CHAIN_ID=11155111
+REACT_APP_ALCHEMY_API=<your Alchemy API key>
 // We can skip this env variable- the dapp uses the correct address
 // of Multicall contract for Sepolia under the hood.
 REACT_APP_MULTICALL_ADDRESS=$MULTICALL_ADDRESS
@@ -109,9 +108,8 @@ The following procedure allows to deploy T token dashboard to production:
 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_DEFAULT_PROVIDER_CHAIN_ID=11155111
+REACT_APP_ALCHEMY_API=<your Alchemy API key here>
 REACT_APP_MULTICALL_ADDRESS=$MULTICALL_ADDRESS
 
 REACT_APP_FEATURE_FLAG_TBTC_V2=true
@@ -129,13 +127,18 @@ REACT_APP_FEATURE_FLAG_SENTRY=false
 REACT_APP_SENTRY_DSN=$SENTRY_DSN
 REACT_APP_FEATURE_FLAG_TRM=false
 
-REACT_APP_ELECTRUM_PROTOCOL=wss
-REACT_APP_ELECTRUM_HOST=electrumx-server.test.tbtc.network
-REACT_APP_ELECTRUM_PORT=8443
+REACT_APP_MAINNET_ELECTRUM_PROTOCOL=$MAINNET_ELECTRUM_PROTOCOL
+REACT_APP_MAINNET_ELECTRUM_HOST=$MAINNET_ELECTRUM_HOST
+REACT_APP_MAINNET_ELECTRUM_PORT=$MAINNET_ELECTRUM_PORT
+REACT_APP_TESTNET_ELECTRUM_PROTOCOL=wss
+REACT_APP_TESTNET_ELECTRUM_HOST=electrumx-server.test.tbtc.network
+REACT_APP_TESTNET_ELECTRUM_PORT=8443
 REACT_APP_MOCK_BITCOIN_CLIENT=false
 
 REACT_APP_WALLET_CONNECT_PROJECT_ID=$WALLET_CONNECT_PROJECT_ID
 
+REACT_APP_TBTC_SUBGRAPH_API=$TBTC_SUBGRAPH_API
+
 REACT_APP_TACO_DOMAIN=dashboard
 ```
 

package.json

@@ -18,11 +18,11 @@
     "@keep-network/keep-ecdsa": "development",
     "@keep-network/random-beacon": "development",
     "@keep-network/tbtc": "development",
-    "@keep-network/tbtc-v2.ts": "^2.4.1",
+    "@keep-network/tbtc-v2.ts": "2.4.5",
     "@ledgerhq/connect-kit-loader": "1.1.8",
     "@ledgerhq/wallet-api-client": "^1.2.0",
     "@ledgerhq/wallet-api-client-react": "^1.1.1",
-    "@nucypher/nucypher-contracts": "0.13.0",
+    "@nucypher/nucypher-contracts": "0.23.0",
     "@reduxjs/toolkit": "^1.6.1",
     "@rehooks/local-storage": "^2.4.4",
     "@sentry/react": "^7.33.0",

src/App.tsx

@@ -38,7 +38,7 @@ import { useSubscribeToToppedUpEvent } from "./hooks/useSubscribeToToppedUpEvent
 import { pages } from "./pages"
 import { useCheckBonusEligibility } from "./hooks/useCheckBonusEligibility"
 import { useFetchStakingRewards } from "./hooks/useFetchStakingRewards"
-import { isSameChainId, isSameETHAddress } from "./web3/utils"
+import { isSameETHAddress } from "./web3/utils"
 import { ThresholdProvider } from "./contexts/ThresholdContext"
 import { LedgerLiveAppProvider } from "./contexts/LedgerLiveAppContext"
 import {
@@ -63,6 +63,9 @@ import { useIsEmbed } from "./hooks/useIsEmbed"
 import TBTC from "./pages/tBTC"
 import { useDetectIfEmbed } from "./hooks/useDetectIfEmbed"
 import { useGoogleTagManager } from "./hooks/google-tag-manager"
+import { hexToNumber, isSameChainId } from "./networks/utils"
+import { walletConnected } from "./store/account"
+import { useIsActive } from "./hooks/useIsActive"
 
 const Web3EventHandlerComponent = () => {
   useSubscribeToVendingMachineContractEvents()
@@ -133,15 +136,19 @@ const useSubscribeToVendingMachineContractEvents = () => {
 
 const AppBody = () => {
   const dispatch = useDispatch()
-  const { connector, account, chainId, deactivate } = useWeb3React()
+  const { connector, account, chainId } = useIsActive()
 
   useEffect(() => {
     const updateHandler = (update: ConnectorUpdate) => {
-      // if chain is changed then just deactivate the current provider and reset
-      // store
+      // if chain is changed then just update the redux store for the wallet
+      // connection
       if (update.chainId && !isSameChainId(update.chainId, chainId as number)) {
-        dispatch(resetStoreAction())
-        deactivate()
+        dispatch(
+          walletConnected({
+            address: account || "",
+            chainId: hexToNumber(update.chainId),
+          })
+        )
       } else if (
         update.account &&
         !isSameETHAddress(update.account, account as string)
@@ -169,7 +176,7 @@ const AppBody = () => {
       connector?.removeListener(ConnectorEvent.Update, updateHandler)
       connector?.removeListener(ConnectorEvent.Deactivate, deactivateHandler)
     }
-  }, [connector, dispatch, account])
+  }, [connector, dispatch, account, chainId])
 
   useEffect(() => {
     dispatch(fetchETHPriceUSD())

src/components/CopyToClipboard/index.tsx

@@ -12,7 +12,7 @@ import shortenAddress from "../../utils/shortenAddress"
 import ViewInBlockExplorer, {
   ViewInBlockExplorerProps,
 } from "../ViewInBlockExplorer"
-import { ExplorerDataType } from "../../utils/createEtherscanLink"
+import { ExplorerDataType } from "../../networks/enums/networks"
 
 type CopyToClipboardProps = {
   textToCopy: string

src/components/Forms/HelperErrorText.tsx

@@ -1,20 +1,26 @@
 import { FC } from "react"
-import { FormErrorMessage, FormHelperText } from "@threshold-network/components"
+import {
+  Box,
+  FormErrorMessage,
+  FormHelperText,
+} from "@threshold-network/components"
 
 const HelperErrorText: FC<{
   errorMsgText?: string | JSX.Element
   hasError?: boolean
   helperText?: string | JSX.Element
 }> = ({ errorMsgText, helperText, hasError }) => {
-  if (hasError) {
-    return (
-      <FormErrorMessage>
-        {errorMsgText || "Please enter a valid value"}
-      </FormErrorMessage>
-    )
-  }
-
-  return helperText ? <FormHelperText>{helperText}</FormHelperText> : null
+  return (
+    <Box mt={2} maxWidth="100%" overflow="hidden" textOverflow="ellipsis">
+      {hasError ? (
+        <FormErrorMessage>
+          {errorMsgText || "Please enter a valid value"}
+        </FormErrorMessage>
+      ) : helperText ? (
+        <FormHelperText>{helperText}</FormHelperText>
+      ) : null}
+    </Box>
+  )
 }
 
 export default HelperErrorText

src/components/Link/SharedLinks.tsx

@@ -3,7 +3,7 @@ import { useColorModeValue } from "@chakra-ui/react"
 import { BodySm } from "@threshold-network/components"
 import ViewInBlockExplorer from "../ViewInBlockExplorer"
 import { useTStakingContract } from "../../web3/hooks"
-import { ExplorerDataType } from "../../utils/createEtherscanLink"
+import { ExplorerDataType } from "../../networks/enums/networks"
 
 type StakingContractLearnMoreProps = ComponentProps<typeof BodySm>
 

src/components/MintDurationTiers/MintDurationTiers.tsx

@@ -55,9 +55,9 @@ const MintDurationTiers: FC<MintDurationTiersProps> = ({
         // is returned as is.
         const confirmations = getNumberOfConfirmationsByAmount(safeAmount)
         const durationInMinutes =
-          getDurationByNumberOfConfirmations(confirmations)
-        // Round up the minutes to the nearest half-hour
-        const hours = (Math.round(durationInMinutes / 30) * 30) / 60
+          getDurationByNumberOfConfirmations(confirmations) * 1.5
+        // Round down the minutes to the nearest half-hour
+        const hours = (Math.floor(durationInMinutes / 30) * 30) / 60
         const formattedAmount = amount.toFixed(2)
 
         const hoursSuffix = hours === 1 ? "hour" : "hours"

src/components/Modal/ClaimingRewards/index.tsx

@@ -34,6 +34,7 @@ import { useModal } from "../../../hooks/useModal"
 import { ModalType } from "../../../enums"
 import ModalCloseButton from "../ModalCloseButton"
 import SubmitTxButton from "../../SubmitTxButton"
+import { useMerkleDropContract } from "../../../web3/hooks/useMerkleDropContract"
 
 const ClaimingRewardsBase: FC<
   BaseModalProps & {
@@ -44,6 +45,7 @@ const ClaimingRewardsBase: FC<
   const { openModal } = useModal()
   const beneficiaryRewards = useSelector(selectAccumulatedRewardsPerBeneficiary)
   const rewards = useSelector(selectInterimRewards)
+  const merkleDropContract = useMerkleDropContract()
 
   const onClaimSuccess = useCallback<OnSuccessCallback>(
     (receipt) => {
@@ -99,6 +101,7 @@ const ClaimingRewardsBase: FC<
           Cancel
         </Button>
         <SubmitTxButton
+          isDisabled={!merkleDropContract}
           onSubmit={() => {
             claim(Object.keys(rewards))
           }}

src/components/Modal/ConfirmStakingParams/index.tsx

@@ -30,6 +30,7 @@ import { useStakeTransaction } from "../../../web3/hooks/useStakeTransaction"
 import { formatTokenAmount } from "../../../utils/formatAmount"
 import ModalCloseButton from "../ModalCloseButton"
 import SubmitTxButton from "../../SubmitTxButton"
+import { useTStakingContract } from "../../../web3/hooks"
 
 const ConfirmStakingParamsModal: FC<
   BaseModalProps & { stakeAmount: string }
@@ -40,6 +41,7 @@ const ConfirmStakingParamsModal: FC<
   const { account } = useWeb3React()
   const { updateState } = useStakingState()
   const checkIfProviderUsed = useCheckDuplicateProviderAddress()
+  const stakingContract = useTStakingContract()
 
   // stake transaction, opens success modal on success callback
   // not needed once MAS is launched
@@ -129,7 +131,11 @@ const ConfirmStakingParamsModal: FC<
         <Button onClick={closeModal} variant="outline" mr={2}>
           Cancel
         </Button>
-        <SubmitTxButton type="submit" form="advanced-staking-params-form">
+        <SubmitTxButton
+          isDisabled={!stakingContract}
+          type="submit"
+          form="advanced-staking-params-form"
+        >
           {featureFlags.MULTI_APP_STAKING ? "Continue" : "Stake"}
         </SubmitTxButton>
       </ModalFooter>