Feat/add solana integration

.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

.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,

.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

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
+    },
+  },
 }

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",

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 {
@@ -66,6 +66,7 @@ import { useGoogleTagManager } from "./hooks/google-tag-manager"
 import { hexToNumber, isSameChainId } 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)
@@ -151,7 +152,7 @@ const AppBody = () => {
         )
       } else if (
         update.account &&
-        !isSameETHAddress(update.account, account as string)
+        !isSameAddress(update.account, account as string)
       ) {
         // dispatch(resetStoreAction())
 
@@ -266,19 +267,21 @@ const App: FC = () => {
   return (
     <Router basename={`${process.env.PUBLIC_URL}`}>
       <Web3ReactProvider getLibrary={getLibrary}>
-        <LedgerLiveAppProvider>
-          <ThresholdProvider>
-            <ReduxProvider store={reduxStore}>
-              <ChakraProvider theme={theme}>
-                <TokenContextProvider>
-                  <Web3EventHandlerComponent />
-                  <ModalRoot />
-                  <AppBody />
-                </TokenContextProvider>
-              </ChakraProvider>
-            </ReduxProvider>
-          </ThresholdProvider>
-        </LedgerLiveAppProvider>
+        <SolanaWalletProvider>
+          <LedgerLiveAppProvider>
+            <ThresholdProvider>
+              <ReduxProvider store={reduxStore}>
+                <ChakraProvider theme={theme}>
+                  <TokenContextProvider>
+                    <Web3EventHandlerComponent />
+                    <ModalRoot />
+                    <AppBody />
+                  </TokenContextProvider>
+                </ChakraProvider>
+              </ReduxProvider>
+            </ThresholdProvider>
+          </LedgerLiveAppProvider>
+        </SolanaWalletProvider>
       </Web3ReactProvider>
     </Router>
   )

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<ComponentProps & FormikProps<FormValues>> = ({
   values,
 }) => {
   const { authorizer } = values
-  const { account } = useWeb3React()
+  const { account } = useIsActive()
 
   return (
     <Form id={formId}>
@@ -52,8 +52,8 @@ const AdvancedParamsFormBase: FC<ComponentProps & FormikProps<FormValues>> = ({
           <AddressHelper text="This address will authorize applications. We recommend you to use the same address as your wallet address." />
         }
       />
-      {isAddress(authorizer) &&
-        !isSameETHAddress(authorizer, account as string) && (
+      {isEthereumAddress(authorizer) &&
+        !isSameAddress(authorizer, account as string) && (
           <Alert status="warning" mt={6}>
             <AlertIcon />
             <BodyXs>

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,14 +30,15 @@ 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 }
 > = ({ stakeAmount }) => {
   const formRef = useRef<FormikProps<FormValues>>(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()

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()

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"

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<FormikProps<MapOperatorToStakingProviderFormValues>>(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}`)

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<BaseModalProps> = ({ closeModal }) => {
                     key={stake.stakingProvider}
                     boxShadow="none"
                     borderColor={
-                      isAddress(selectedProviderAddress) &&
-                      isSameETHAddress(
+                      isEthereumAddress(selectedProviderAddress) &&
+                      isSameAddress(
                         stake.stakingProvider,
                         selectedProviderAddress
                       )

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 }) => (
+  <WalletConnectionModalBase
+    goBack={goBack}
+    closeModal={closeModal}
+    WalletIcon={WalletConnectIcon}
+    title="Solana"
+    subTitle="Connect Solana by choosing your wallet."
+    shouldForceCloseModal
+  />
+)
+
+export default ConnectSolana

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) {

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<Props> = ({
   const { activate, active, account } = useWeb3React()
 
   useEffect(() => {
+    if (shouldForceCloseModal) closeModal()
     if (!connector) return
 
     activate(connector)
-    if (shouldForceCloseModal) closeModal()
   }, [activate, connector, shouldForceCloseModal])
 
   return (