Merge pull request #850 from threshold-network/chore/update-sdk-and-node-versions

chore: upgrade tbtc sdk & workflow config fixes

Author: evandrosaturnino

.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

@@ -3,6 +3,7 @@ const webpack = require("webpack")
 module.exports = {
   babel: {
     plugins: [
+      "@babel/plugin-proposal-numeric-separator",
       "@babel/plugin-proposal-nullish-coalescing-operator",
       "@babel/plugin-proposal-optional-chaining",
       "@babel/plugin-proposal-logical-assignment-operators",
@@ -11,6 +12,8 @@ module.exports = {
        * ECPair library error used by "@keep-network/tbtc-v2.ts"
        */
       ["@babel/plugin-transform-class-properties", { loose: true }],
+      ["@babel/plugin-proposal-private-methods", { loose: true }],
+      ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
     ],
   },
   jest: {
@@ -36,6 +39,11 @@ module.exports = {
   },
   webpack: {
     configure: (webpackConfig) => {
+      webpackConfig.module.rules.push({
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: "javascript/auto",
+      })
       // Add webpack plugins
       webpackConfig.plugins = [
         ...webpackConfig.plugins,

package.json

@@ -18,7 +18,7 @@
     "@keep-network/keep-ecdsa": "1.8.0",
     "@keep-network/random-beacon": "2.0.0",
     "@keep-network/tbtc": "1.1.0",
-    "@keep-network/tbtc-v2.ts": "^2.7.1",
+    "@keep-network/tbtc-v2.ts": "^2.8.0",
     "@ledgerhq/connect-kit-loader": "1.1.8",
     "@ledgerhq/wallet-api-client": "^1.2.0",
     "@ledgerhq/wallet-api-client-react": "^1.1.1",
@@ -111,7 +111,11 @@
     "babel-loader": "8.1.0",
     "react-error-overlay": "6.0.9",
     "@types/react": "17.0.30",
-    "@tenderly/hardhat-tenderly": ">=1.0.12 <1.1.0"
+    "@tenderly/hardhat-tenderly": ">=1.0.12 <1.1.0",
+    "@solana/web3.js": "1.98.0",
+    "@solana/errors": "2.1.0",
+    "@solana/codecs-numbers": "2.1.0",
+    "@solana/codecs-core": "2.1.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-logical-assignment-operators": "^7.20.7",

src/components/Forms/FormikInput.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import { ChangeEvent, FC, FocusEvent } from "react"
 import {
   FormControl,
   FormControlProps,
@@ -20,6 +20,8 @@ export const FormikInput: FC<
     helperText?: string | JSX.Element
     placeholder?: string
     tooltip?: string
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void
   }
 > = ({
   name,
@@ -28,6 +30,8 @@ export const FormikInput: FC<
   helperText,
   placeholder,
   tooltip,
+  onChange,
+  onBlur,
   ...restProps
 }) => {
   const [field, meta] = useField(name)
@@ -75,8 +79,16 @@ export const FormikInput: FC<
         errorBorderColor="red.300"
         placeholder={placeholder}
         _placeholder={{ color: useColorModeValue("gray.400", "gray.500") }}
-        {...field}
-        value={meta.value}
+        name={field.name}
+        value={field.value}
+        onChange={(e) => {
+          field.onChange(e)
+          onChange?.(e)
+        }}
+        onBlur={(e) => {
+          field.onBlur(e)
+          onBlur?.(e)
+        }}
       />
       <HelperErrorText
         helperText={helperText}

src/components/Modal/SelectWalletModal/ConnectSui.tsx

@@ -11,7 +11,7 @@ const ConnectSui: FC<{
     goBack={goBack}
     closeModal={closeModal}
     WalletIcon={SuiIcon}
-    title="Sui"
+    title="Sui Wallets"
     subTitle="Connect by choosing one of the available wallets."
   >
     <SuiWalletList closeModal={closeModal} />

src/components/Modal/SelectWalletModal/index.tsx

@@ -82,7 +82,7 @@ const baseWalletOptions: WalletOption[] = [
   },
   {
     id: WalletType.Sui,
-    title: "Sui",
+    title: "Sui Wallets",
     icon: {
       light: SuiIcon,
       dark: SuiIcon,

src/contexts/StarknetWalletProvider.tsx

@@ -196,7 +196,7 @@ export const StarknetWalletProvider: React.FC<StarknetWalletProviderProps> = ({
       // Use starknetkit's connect with modal and custom dApp name
       const result = await connect({
         modalMode: "alwaysAsk",
-        dappName: "StarkNet",
+        dappName: "Starknet",
         modalTheme: "dark",
       })
 
@@ -371,7 +371,7 @@ export const StarknetWalletProvider: React.FC<StarknetWalletProviderProps> = ({
       getStarknetKit().then(({ connect }) => {
         connect({
           modalMode: "neverAsk",
-          dappName: "StarkNet",
+          dappName: "Starknet",
           modalTheme: "dark",
         })
           .then((result: any) => {

src/pages/tBTC/Bridge/Minting/ProvideData.tsx

@@ -12,6 +12,7 @@ import {
   useState,
   useEffect,
   FocusEvent,
+  ChangeEvent,
 } from "react"
 import { Form, FormikInput } from "../../../../components/Forms"
 import withOnlyConnectedWallet from "../../../../components/withOnlyConnectedWallet"
@@ -68,7 +69,6 @@ type ComponentProps = {
 const MintingProcessFormBase: FC<ComponentProps & FormikProps<FormValues>> = ({
   formId,
   values,
-  setFieldTouched,
 }) => {
   const dispatch = useAppDispatch()
   const threshold = useThreshold()
@@ -80,9 +80,8 @@ const MintingProcessFormBase: FC<ComponentProps & FormikProps<FormValues>> = ({
       : BitcoinNetwork.Mainnet
   )
 
-  const handleBtcAddressChange = (event: FocusEvent<HTMLInputElement>) => {
+  const handleBtcAddressChange = (event: ChangeEvent<HTMLInputElement>) => {
     const btcAddress = event.target.value
-    setFieldTouched("btcRecoveryAddress", true)
 
     const isValidFormat =
       validateBTCAddress(btcAddress, threshold.tbtc.bitcoinNetwork) ===
@@ -95,10 +94,6 @@ const MintingProcessFormBase: FC<ComponentProps & FormikProps<FormValues>> = ({
           ethChainId: SupportedChainIds.Ethereum,
         })
       )
-    } else if (btcAddress) {
-      console.log(
-        "BTC Address format validation failed (onBlur) or address is empty."
-      )
     }
   }
 
@@ -156,6 +151,7 @@ const MintingProcessForm = withFormik<MintingProcessFormProps, FormValues>({
   },
   displayName: "MintingProcessForm",
   enableReinitialize: true,
+  validateOnChange: false,
 })(MintingProcessFormBase)
 
 export const ProvideDataComponent: FC<{