diff --git a/.github/workflows/dashboard-ci.yml b/.github/workflows/dashboard-ci.yml index be1e19186..2b004c875 100644 --- 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: "18" + node-version: "20" cache: "yarn" # This step forces Git to download dependencies using `https://` protocol, @@ -58,7 +58,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: "18" + node-version: "20" cache: "yarn" # We need this step because the `@keep-network/tbtc` which we update in diff --git a/.github/workflows/dashboard-mainnet.yml b/.github/workflows/dashboard-mainnet.yml index df3472a87..8e41eba6b 100644 --- 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: "18" + node-version: "20" cache: "yarn" # This step forces Git to download dependencies using `https://` protocol, diff --git a/.github/workflows/reusable-build-and-publish.yml b/.github/workflows/reusable-build-and-publish.yml index 5b41ed3fc..4e4559b2f 100644 --- a/.github/workflows/reusable-build-and-publish.yml +++ b/.github/workflows/reusable-build-and-publish.yml @@ -87,7 +87,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: "18" + node-version: "20" cache: "yarn" # We need this step because the `@keep-network/tbtc` which we update in diff --git a/craco.config.js b/craco.config.js index 7c558aa58..773e1a720 100644 --- a/craco.config.js +++ b/craco.config.js @@ -1,6 +1,8 @@ module.exports = { babel: { plugins: [ + "@babel/plugin-proposal-numeric-separator", + "@babel/plugin-proposal-logical-assignment-operators", "@babel/plugin-proposal-nullish-coalescing-operator", "@babel/plugin-proposal-optional-chaining", /* @@ -10,4 +12,16 @@ module.exports = { ["@babel/plugin-transform-class-properties", { loose: true }], ], }, + webpack: { + configure: (webpackConfig, { env, paths }) => { + // Add a rule to handle .mjs files + webpackConfig.module.rules.push({ + test: /\.mjs$/, + include: /node_modules/, + type: "javascript/auto", + }) + + return webpackConfig + }, + }, } diff --git a/package.json b/package.json index ef9b0c052..e169380e8 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,12 @@ "@web3-react/injected-connector": "^6.0.7", "@web3-react/types": "^6.0.7", "@web3-react/walletlink-connector": "^6.2.13", + "@solana/wallet-adapter-base": "^0.9.24", + "@solana/wallet-adapter-react": "^0.15.36", + "@solana/wallet-adapter-react-ui": "^0.9.36", + "@solana/wallet-adapter-wallets": "^0.19.33", + "@solana/web3.js": "^1.98.0", + "@coral-xyz/anchor": "^0.31.0", "axios": "^0.24.0", "bignumber.js": "^9.1.2", "bitcoin-address-validation": "^2.2.1", diff --git a/src/App.tsx b/src/App.tsx index 1eb7a8ab9..625a187ee 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,7 +7,7 @@ import "@fontsource/ibm-plex-mono/400.css" import { FC, useEffect, Fragment } from "react" import { Box, ChakraProvider, useColorModeValue } from "@chakra-ui/react" import { Provider as ReduxProvider, useDispatch } from "react-redux" -import { useWeb3React, Web3ReactProvider } from "@web3-react/core" +import { Web3ReactProvider } from "@web3-react/core" import { ConnectorEvent, ConnectorUpdate } from "@web3-react/types" import { BrowserRouter as Router, @@ -38,7 +38,7 @@ import { useSubscribeToToppedUpEvent } from "./hooks/useSubscribeToToppedUpEvent import { pages } from "./pages" import { useCheckBonusEligibility } from "./hooks/useCheckBonusEligibility" import { useFetchStakingRewards } from "./hooks/useFetchStakingRewards" -import { isSameETHAddress } from "./web3/utils" +import { isSameAddress } from "./web3/utils" import { ThresholdProvider } from "./contexts/ThresholdContext" import { LedgerLiveAppProvider } from "./contexts/LedgerLiveAppContext" import { @@ -63,9 +63,10 @@ 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 { hexToNumber, isSameChainNameOrId } from "./networks/utils" import { walletConnected } from "./store/account" import { useIsActive } from "./hooks/useIsActive" +import SolanaWalletProvider from "./contexts/SolanaWalletProvider" const Web3EventHandlerComponent = () => { useSubscribeToVendingMachineContractEvents() @@ -95,7 +96,7 @@ const Web3EventHandlerComponent = () => { // TODO: Let's move this to its own hook like useKeep, useT, etc const useSubscribeToVendingMachineContractEvents = () => { - const { account } = useWeb3React() + const { account } = useIsActive() const { openModal } = useModal() const keepVendingMachine = useVendingMachineContract(Token.Keep) const nuVendingMachine = useVendingMachineContract(Token.Nu) @@ -142,7 +143,10 @@ const AppBody = () => { const updateHandler = (update: ConnectorUpdate) => { // if chain is changed then just update the redux store for the wallet // connection - if (update.chainId && !isSameChainId(update.chainId, chainId as number)) { + if ( + update.chainId && + !isSameChainNameOrId(update.chainId, chainId as number) + ) { dispatch( walletConnected({ address: account || "", @@ -151,7 +155,7 @@ const AppBody = () => { ) } else if ( update.account && - !isSameETHAddress(update.account, account as string) + !isSameAddress(update.account, account as string) ) { // dispatch(resetStoreAction()) @@ -266,19 +270,21 @@ const App: FC = () => { return ( - - - - - - - - - - - - - + + + + + + + + + + + + + + + ) diff --git a/src/components/Modal/ConfirmStakingParams/AdvancedParamsForm.tsx b/src/components/Modal/ConfirmStakingParams/AdvancedParamsForm.tsx index bb5848eeb..c4b62fce7 100644 --- a/src/components/Modal/ConfirmStakingParams/AdvancedParamsForm.tsx +++ b/src/components/Modal/ConfirmStakingParams/AdvancedParamsForm.tsx @@ -8,9 +8,9 @@ import { BodyXs, useColorModeValue, } from "@threshold-network/components" -import { useWeb3React } from "@web3-react/core" -import { isAddress, isSameETHAddress } from "../../../web3/utils" +import { isEthereumAddress, isSameAddress } from "../../../web3/utils" import Link from "../../Link" +import { useIsActive } from "../../../hooks/useIsActive" export interface FormValues { stakingProvider: string @@ -27,7 +27,7 @@ const AdvancedParamsFormBase: FC> = ({ values, }) => { const { authorizer } = values - const { account } = useWeb3React() + const { account } = useIsActive() return (
@@ -52,8 +52,8 @@ const AdvancedParamsFormBase: FC> = ({ } /> - {isAddress(authorizer) && - !isSameETHAddress(authorizer, account as string) && ( + {isEthereumAddress(authorizer) && + !isSameAddress(authorizer, account as string) && ( diff --git a/src/components/Modal/ConfirmStakingParams/index.tsx b/src/components/Modal/ConfirmStakingParams/index.tsx index 6426d96a8..c00b18397 100644 --- a/src/components/Modal/ConfirmStakingParams/index.tsx +++ b/src/components/Modal/ConfirmStakingParams/index.tsx @@ -1,5 +1,4 @@ import { FC, useEffect, useRef, useState } from "react" -import { useWeb3React } from "@web3-react/core" import { BodyLg, BodySm, @@ -31,6 +30,7 @@ import { formatTokenAmount } from "../../../utils/formatAmount" import ModalCloseButton from "../ModalCloseButton" import SubmitTxButton from "../../SubmitTxButton" import { useTStakingContract } from "../../../web3/hooks" +import { useIsActive } from "../../../hooks/useIsActive" const ConfirmStakingParamsModal: FC< BaseModalProps & { stakeAmount: string } @@ -38,7 +38,7 @@ const ConfirmStakingParamsModal: FC< const formRef = useRef>(null) const { closeModal, openModal } = useModal() const [hasBeenValidatedOnMount, setHasBeenValidatedOnMount] = useState(false) - const { account } = useWeb3React() + const { account } = useIsActive() const { updateState } = useStakingState() const checkIfProviderUsed = useCheckDuplicateProviderAddress() const stakingContract = useTStakingContract() diff --git a/src/components/Modal/MapOperatorToStakingProviderConfirmationModal/index.tsx b/src/components/Modal/MapOperatorToStakingProviderConfirmationModal/index.tsx index 32d9f2fc0..cb64d5a02 100644 --- a/src/components/Modal/MapOperatorToStakingProviderConfirmationModal/index.tsx +++ b/src/components/Modal/MapOperatorToStakingProviderConfirmationModal/index.tsx @@ -10,7 +10,6 @@ import { } from "@chakra-ui/react" import { AddressZero } from "@ethersproject/constants" import { BodyLg, BodyMd, H5, LabelSm } from "@threshold-network/components" -import { useWeb3React } from "@web3-react/core" import { FC, useCallback, useState } from "react" import { ModalType } from "../../../enums" import { useRegisterMultipleOperatorsTransaction } from "../../../hooks/staking-applications/useRegisterMultipleOperatorsTransaction" @@ -27,6 +26,7 @@ import { OnSuccessCallback } from "../../../web3/hooks" import { ApplicationForOperatorMapping } from "../MapOperatorToStakingProviderModal" import SubmitTxButton from "../../SubmitTxButton" import { useThreshold } from "../../../contexts/ThresholdContext" +import { useIsActive } from "../../../hooks/useIsActive" const OperatorMappingConfirmation: FC< BoxProps & { appName: string; operator: string; stakingProvider: string } @@ -59,7 +59,7 @@ const MapOperatorToStakingProviderConfirmationModal: FC< applications: ApplicationForOperatorMapping[] } > = ({ applications, closeModal }) => { - const { account } = useWeb3React() + const { account } = useIsActive() const threshold = useThreshold() const { registerMultipleOperators } = useRegisterMultipleOperatorsTransaction() diff --git a/src/components/Modal/MapOperatorToStakingProviderModal/MapOperatorToStakingProviderForm.tsx b/src/components/Modal/MapOperatorToStakingProviderModal/MapOperatorToStakingProviderForm.tsx index 7a56601a8..9f7b01a7a 100644 --- a/src/components/Modal/MapOperatorToStakingProviderModal/MapOperatorToStakingProviderForm.tsx +++ b/src/components/Modal/MapOperatorToStakingProviderModal/MapOperatorToStakingProviderForm.tsx @@ -2,7 +2,7 @@ import { FC, Ref, forwardRef } from "react" import { FormikProps, FormikErrors, Formik, withFormik } from "formik" import { Form, FormikInput } from "../../Forms" import { getErrorsObj, validateETHAddress } from "../../../utils/forms" -import { isAddressZero, isSameETHAddress } from "../../../web3/utils" +import { isAddressZero, isSameAddress } from "../../../web3/utils" export type MapOperatorToStakingProviderFormValues = { operator: string @@ -56,14 +56,14 @@ const validateInputtedOperatorAddress = async ( if ( isOperatorMappedOnlyInRandomBeacon && - !isSameETHAddress(operator, mappedOperatorRandomBeacon) + !isSameAddress(operator, mappedOperatorRandomBeacon) ) { validationMsg = "The operator address doesn't match the one used in random beacon app" } if ( isOperatorMappedOnlyInTbtc && - !isSameETHAddress(operator, mappedOperatorTbtc) + !isSameAddress(operator, mappedOperatorTbtc) ) { validationMsg = "The operator address doesn't match the one used in tbtc app" diff --git a/src/components/Modal/MapOperatorToStakingProviderModal/index.tsx b/src/components/Modal/MapOperatorToStakingProviderModal/index.tsx index 2404f0b20..3c0f3e952 100644 --- a/src/components/Modal/MapOperatorToStakingProviderModal/index.tsx +++ b/src/components/Modal/MapOperatorToStakingProviderModal/index.tsx @@ -22,17 +22,17 @@ import { FormikProps } from "formik" import { ModalType } from "../../../enums" import { useModal } from "../../../hooks/useModal" import StakeAddressInfo from "../../../pages/Staking/StakeCard/StakeAddressInfo" -import { useWeb3React } from "@web3-react/core" import { useThreshold } from "../../../contexts/ThresholdContext" import { isAddressZero, isEmptyOrZeroAddress, - isSameETHAddress, + isSameAddress, AddressZero, } from "../../../web3/utils" import { selectMappedOperators } from "../../../store/account/selectors" import { useAppSelector } from "../../../hooks/store" import ModalCloseButton from "../ModalCloseButton" +import { useIsActive } from "../../../hooks/useIsActive" export interface MapOperatorToStakingProviderModalProps { mappedOperatorTbtc: string @@ -49,7 +49,7 @@ export interface ApplicationForOperatorMapping { const MapOperatorToStakingProviderModal: FC< BaseModalProps & MapOperatorToStakingProviderModalProps > = () => { - const { account } = useWeb3React() + const { account } = useIsActive() const formRefTbtcRb = useRef>(null) const formRefTaco = @@ -85,7 +85,7 @@ const MapOperatorToStakingProviderModal: FC< )! return ( !isAddressZero(stakingProviderMappedEcdsa) && - !isSameETHAddress(stakingProviderMappedEcdsa, account!) + !isSameAddress(stakingProviderMappedEcdsa, account!) ) case "randomBeacon": const stakingProviderMappedRandomBeacon = @@ -94,7 +94,7 @@ const MapOperatorToStakingProviderModal: FC< )! return ( !isAddressZero(stakingProviderMappedRandomBeacon) && - !isSameETHAddress(stakingProviderMappedRandomBeacon, account!) + !isSameAddress(stakingProviderMappedRandomBeacon, account!) ) case "taco": stakingProviderMapped = @@ -103,7 +103,7 @@ const MapOperatorToStakingProviderModal: FC< )! return ( !isAddressZero(stakingProviderMapped) && - !isSameETHAddress(stakingProviderMapped, account!) + !isSameAddress(stakingProviderMapped, account!) ) default: throw new Error(`Unsupported app name: ${appName}`) diff --git a/src/components/Modal/NewAppsToAuthorizeModal/index.tsx b/src/components/Modal/NewAppsToAuthorizeModal/index.tsx index 3a74d890d..ccde408fb 100644 --- a/src/components/Modal/NewAppsToAuthorizeModal/index.tsx +++ b/src/components/Modal/NewAppsToAuthorizeModal/index.tsx @@ -24,7 +24,7 @@ import { BaseModalProps } from "../../../types" import withBaseModal from "../withBaseModal" import { useStakingState } from "../../../hooks/useStakingState" import { getStakeTitle } from "../../../utils/getStakeTitle" -import { isAddress, isSameETHAddress } from "../../../web3/utils" +import { isEthereumAddress, isSameAddress } from "../../../web3/utils" import ButtonLink from "../../ButtonLink" import ModalCloseButton from "../ModalCloseButton" @@ -62,8 +62,8 @@ const NewAppsToAuthorizeModal: FC = ({ closeModal }) => { key={stake.stakingProvider} boxShadow="none" borderColor={ - isAddress(selectedProviderAddress) && - isSameETHAddress( + isEthereumAddress(selectedProviderAddress) && + isSameAddress( stake.stakingProvider, selectedProviderAddress ) diff --git a/src/components/Modal/SelectWalletModal/ConnectSolana.tsx b/src/components/Modal/SelectWalletModal/ConnectSolana.tsx new file mode 100644 index 000000000..513ea69e5 --- /dev/null +++ b/src/components/Modal/SelectWalletModal/ConnectSolana.tsx @@ -0,0 +1,19 @@ +import { FC } from "react" +import { WalletConnectIcon } from "../../../static/icons/WalletConect" +import { WalletConnectionModalBase } from "./components" + +const ConnectSolana: FC<{ + goBack: () => void + closeModal: () => void +}> = ({ goBack, closeModal }) => ( + +) + +export default ConnectSolana diff --git a/src/components/Modal/SelectWalletModal/components/WalletConnectStatusAlert.tsx b/src/components/Modal/SelectWalletModal/components/WalletConnectStatusAlert.tsx index ed4a6c3d4..b1a2278d3 100644 --- a/src/components/Modal/SelectWalletModal/components/WalletConnectStatusAlert.tsx +++ b/src/components/Modal/SelectWalletModal/components/WalletConnectStatusAlert.tsx @@ -2,14 +2,14 @@ import { FC } from "react" import { AccountSuccessAlert, WalletInitializeAlert } from "./index" import WalletRejectedAlert from "./WalletRejectedAlert" import { isSupportedNetwork } from "../../../../networks/utils" -import { useWeb3React } from "@web3-react/core" import IncorrectNetwork from "./IncorrectNetwork" +import { useIsActive } from "../../../../hooks/useIsActive" const WalletConnectStatusAlert: FC<{ connectionRejected?: boolean active?: boolean }> = ({ connectionRejected, active }) => { - const { chainId } = useWeb3React() + const { chainId } = useIsActive() const networkOK = isSupportedNetwork(chainId) if (connectionRejected) { diff --git a/src/components/Modal/SelectWalletModal/components/WalletConnectionModalBase.tsx b/src/components/Modal/SelectWalletModal/components/WalletConnectionModalBase.tsx index aefec6f6e..0620a8b00 100644 --- a/src/components/Modal/SelectWalletModal/components/WalletConnectionModalBase.tsx +++ b/src/components/Modal/SelectWalletModal/components/WalletConnectionModalBase.tsx @@ -14,7 +14,6 @@ import { useWeb3React } from "@web3-react/core" import { BaseModalProps } from "../../../../types" import { BodyMd, H4 } from "@threshold-network/components" import { AbstractConnector } from "../../../../web3/connectors" -import { WalletType } from "../../../../enums" interface Props extends BaseModalProps { WalletIcon: any @@ -49,10 +48,10 @@ const WalletConnectionModalBase: FC = ({ const { activate, active, account } = useWeb3React() useEffect(() => { + if (shouldForceCloseModal) closeModal() if (!connector) return activate(connector) - if (shouldForceCloseModal) closeModal() }, [activate, connector, shouldForceCloseModal]) return ( diff --git a/src/components/Modal/SelectWalletModal/index.tsx b/src/components/Modal/SelectWalletModal/index.tsx index b179ca3cd..2d2c64fa2 100644 --- a/src/components/Modal/SelectWalletModal/index.tsx +++ b/src/components/Modal/SelectWalletModal/index.tsx @@ -1,10 +1,11 @@ import { ModalHeader } from "@chakra-ui/react" import { useWeb3React } from "@web3-react/core" import { MetaMaskIcon } from "../../../static/icons/MetaMask" +import { SolanaIcon } from "../../../static/icons/Solana" import { Taho } from "../../../static/icons/Taho" import { WalletConnectIcon } from "../../../static/icons/WalletConect" import InitialWalletSelection from "./InitialSelection" -import { FC, useState } from "react" +import { FC, useEffect, useState } from "react" import ConnectMetamask from "./ConnectMetamask" import withBaseModal from "../withBaseModal" import ConnectWalletConnect from "./ConnectWalletConnect" @@ -20,6 +21,8 @@ import ConnectLedgerLive from "./ConnectLedgerLive" import { LedgerLight } from "../../../static/icons/LedgerLight" import { LedgerDark } from "../../../static/icons/LedgerDark" import { featureFlags } from "../../../constants" +import ConnectSolana from "./ConnectSolana" +import { useWalletModal } from "@solana/wallet-adapter-react-ui" const walletOptions: WalletOption[] = [ { @@ -66,9 +69,18 @@ const walletOptions: WalletOption[] = [ dark: CoinbaseWallet, }, }, + { + id: WalletType.Solana, + title: "Solana", + icon: { + light: SolanaIcon, + dark: SolanaIcon, + }, + }, ] const SelectWalletModal: FC = () => { + const { setVisible: setModalVisible } = useWalletModal() const { deactivate } = useWeb3React() const { closeModal } = useModal() @@ -85,6 +97,12 @@ const SelectWalletModal: FC = () => { setWalletToConnect(walletType) } + useEffect(() => { + if (walletToConnect === WalletType.Solana) { + setModalVisible(true) + } + }, [walletToConnect]) + return ( <> @@ -124,6 +142,8 @@ const ConnectWallet: FC<{ return case WalletType.LedgerLive: return + case WalletType.Solana: + return default: return <> } diff --git a/src/components/Navbar/AccountButton.tsx b/src/components/Navbar/AccountButton.tsx index f79777103..9d02b0f70 100644 --- a/src/components/Navbar/AccountButton.tsx +++ b/src/components/Navbar/AccountButton.tsx @@ -1,4 +1,11 @@ -import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react" +import { + Button, + Image, + Menu, + MenuButton, + MenuItem, + MenuList, +} from "@chakra-ui/react" import { FC } from "react" import { useCapture } from "../../hooks/posthog" import { useAppDispatch } from "../../hooks/store" @@ -6,12 +13,15 @@ import { resetStoreAction } from "../../store" import { PosthogEvent } from "../../types/posthog" import shortenAddress from "../../utils/shortenAddress" import Identicon from "../Identicon" +import { useNonEVMConnection } from "../../hooks/useNonEVMConnection" const AccountButton: FC<{ openWalletModal: () => void account?: string | null deactivate: () => void }> = ({ openWalletModal, account, deactivate }) => { + const { nonEVMPublicKey, connectedWalletIcon, disconnectNonEVM } = + useNonEVMConnection() const dispatch = useAppDispatch() const captureWalletDisconnectedEvent = useCapture( PosthogEvent.WalletDisconnected @@ -21,13 +31,27 @@ const AccountButton: FC<{ captureWalletDisconnectedEvent() dispatch(resetStoreAction()) deactivate() + disconnectNonEVM() } - if (account) { + if (account || nonEVMPublicKey) { return ( - }> - {shortenAddress(account)} + + ) : account ? ( + + ) : undefined + } + > + {shortenAddress(nonEVMPublicKey || account)} Disconnect diff --git a/src/components/Navbar/NetworkButton.tsx b/src/components/Navbar/NetworkButton.tsx index c456c598b..46bb9ed58 100644 --- a/src/components/Navbar/NetworkButton.tsx +++ b/src/components/Navbar/NetworkButton.tsx @@ -17,13 +17,13 @@ import { EthereumDark } from "../../static/icons/EthereumDark" import { Arbitrum } from "../../static/icons/Arbitrum" import { Base } from "../../static/icons/Base" import { - chainIdToChainParameterName, + getParameterNameFromChainId, isMainnetChainId, networks, } from "../../networks/utils" import { useIsActive } from "../../hooks/useIsActive" import { NetworkType, SupportedChainIds } from "../../networks/enums/networks" -import { getDefaultProviderChainId } from "../../utils/getEnvVariable" +import { getEthereumDefaultProviderChainId } from "../../utils/getEnvVariable" interface NetworkIconMap { icon: ReactElement @@ -31,7 +31,7 @@ interface NetworkIconMap { } const getNetworkIcon = (chainId: number, colorMode: string): NetworkIconMap => { - const defaultChainId = getDefaultProviderChainId() + const defaultChainId = getEthereumDefaultProviderChainId() const ethereumLogo = colorMode === "light" ? EthereumDark : EthereumLight const grayBackground = "gray.700" @@ -84,7 +84,7 @@ const getNetworkIcon = (chainId: number, colorMode: string): NetworkIconMap => { const NetworkButton: FC = () => { const { colorMode } = useColorMode() const { chainId, switchNetwork } = useIsActive() - const defaultChainId = getDefaultProviderChainId() + const defaultChainId = getEthereumDefaultProviderChainId() const networkIcon = useMemo( () => getNetworkIcon(chainId || 0, colorMode), @@ -156,7 +156,7 @@ const NetworkButton: FC = () => { rightIcon={isOpen ? : } display={{ base: "none", md: "inherit" }} > - {chainIdToChainParameterName(chainId)} + {getParameterNameFromChainId(chainId)} {renderMenuItems()} diff --git a/src/components/SubmitTxButton.tsx b/src/components/SubmitTxButton.tsx index 21d82c154..9ab318e65 100644 --- a/src/components/SubmitTxButton.tsx +++ b/src/components/SubmitTxButton.tsx @@ -4,6 +4,7 @@ import { useIsActive } from "../hooks/useIsActive" import { useConnectWallet } from "../hooks/useConnectWallet" import { RootState } from "../store" import { useSelector } from "react-redux" +import { useNonEVMConnection } from "../hooks/useNonEVMConnection" interface SubmitTxButtonProps extends ButtonProps { onSubmit?: () => void @@ -20,16 +21,22 @@ const SubmitTxButton: FC = ({ isBlocked, trm: { isFetching }, } = useSelector((state: RootState) => state.account) - + const { disconnectNonEVM } = useNonEVMConnection() const { isActive } = useIsActive() + const { isNonEVMActive } = useNonEVMConnection() const connectWallet = useConnectWallet() const isButtonDisabled = isBlocked || isDisabled + const pathnameUrl = window.location.pathname + const isMint = + pathnameUrl.includes("tBTC/mint") || + pathnameUrl.includes("tBTC/resume-deposit") const onConnectWalletClick = () => { + disconnectNonEVM() connectWallet() } - if (isActive) { + if (isActive || (isNonEVMActive && isMint)) { return (