A-1213877919321098: migrate Cipher to Web Crypto API

jsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
+    "ignoreDeprecations": "6.0",
     "paths": {
       "@BasicComponents": ["./src/components/basic/index.js"],
       "@ComposedComponents": ["./src/components/composed/index.js"],

package.json

@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "@bitcoinerlab/secp256k1": "^1.2.0",
-    "@mintlayer/entropy-generator": "^1.0.6",
     "@mintlayer/sdk": "1.0.30",
     "@noble/secp256k1": "^3.0.0",
     "bip32": "^5.0.0",
@@ -20,8 +19,6 @@
     "decimal.js": "^10.6.0",
     "ecpair": "3.0.0",
     "konva": "^10.2.0",
-    "node-forge": "^1.3.3",
-    "pbkdf2": "^3.1.5",
     "process": "^0.11.10",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -64,7 +61,6 @@
     "@babel/preset-env": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
     "@eslint/js": "^9.39.2",
-    "eslint": "^9.39.2",
     "@playwright/test": "^1.58.2",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^10.4.1",
@@ -74,35 +70,36 @@
     "@types/node": "^25.2.3",
     "@types/tiny-secp256k1": "^2.0.1",
     "babel-jest": "^30.2.0",
+    "babel-loader": "^10.0.0",
+    "copy-webpack-plugin": "^13.0.1",
+    "css-loader": "^7.1.3",
     "dotenv": "^17.2.4",
     "dotenv-webpack": "^8.1.1",
     "env-cmd": "^11.0.0",
+    "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "fake-indexeddb": "^6.2.5",
     "globals": "^17.3.0",
+    "html-webpack-plugin": "^5.6.6",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^30.2.0",
     "jest-webgl-canvas-mock": "^2.5.3",
+    "mini-css-extract-plugin": "^2.10.0",
     "prettier": "^3.8.1",
     "pretty-quick": "^4.2.2",
     "style-loader": "^4.0.0",
-    "css-loader": "^7.1.3",
-    "url-loader": "^4.1.1",
-    "babel-loader": "^10.0.0",
-    "html-webpack-plugin": "^5.6.6",
-    "mini-css-extract-plugin": "^2.10.0",
-    "copy-webpack-plugin": "^13.0.1",
-    "webpack": "^5.105.1",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.3",
     "typescript": "^5.9.3",
+    "url-loader": "^4.1.1",
     "vm-browserify": "^1.1.2",
     "wallet-address-validator": "^0.2.4",
-    "webextension-polyfill": "^0.12.0"
+    "webextension-polyfill": "^0.12.0",
+    "webpack": "^5.105.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.3"
   }
 }

public/background.js

@@ -174,6 +174,8 @@
       }
     }
 
+    if (!message.method && message.action !== 'popupResponse') return
+
     // Handle popup responses
     if (message.action === 'popupResponse') {
       const { requestId, origin, result, error } = message
@@ -209,7 +211,7 @@
         storedSendResponse({ result, error })
         pendingResponses.delete(requestId)
       } else {
-        api.runtime.sendMessage({ requestId, result, error }, (response) => {
+        api.runtime.sendMessage({ requestId, result, error }, () => {
           if (api.runtime.lastError) {
             console.error(
               '[Mintlayer] Send response error:',

src/components/basic/Button/Button.js

@@ -13,8 +13,8 @@ const Button = ({
   dataTestId = 'button',
   onMouseEnter,
   onMouseLeave,
+  autoFocus = false,
 }) => {
-  // Вычисляем классы сразу, без useEffect
   const classList = ['btn', ...extraStyleClasses]
   if (dark) {
     classList.push('dark')
@@ -32,6 +32,7 @@ const Button = ({
       type={buttonType}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
+      autoFocus={autoFocus}
     >
       {children}
     </button>

src/components/basic/Input/InputFloat.js

@@ -1,6 +1,5 @@
 import { AppInfo, Expressions } from '@Constants'
 import { NumbersHelper } from '@Helpers'
-import { useEffect, useState } from 'react'
 import Input from './Input'
 
 const InputFloat = (props) => {
@@ -12,7 +11,7 @@ const InputFloat = (props) => {
   const [regexIntegerPartIndex, regexDecimalPartIndex] = [1, 5]
   const breakersRegex = /[.,]/g
 
-  const [value, setValue] = useState(props.value || '')
+  const value = props.value || ''
 
   const removeBreakers = (value) => value.replaceAll(breakersRegex, '')
 
@@ -76,10 +75,6 @@ const InputFloat = (props) => {
     return parsedVal.value || ev.target.value
   }
 
-  useEffect(() => {
-    setValue(props.value)
-  }, [props.value])
-
   return (
     <Input
       {...props}

src/components/basic/Input/InputInteger.js

@@ -1,19 +1,19 @@
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 import Input from './Input'
 
 import { Expressions } from '@Constants'
 import { NumbersHelper } from '@Helpers'
 
 const InputInteger = (props) => {
   const mask = Expressions.FIELDS.INTEGER
-  const [value, setValue] = useState(0)
 
-  useEffect(() => {
-    setValue(~~props.value)
-    !NumbersHelper.isInteger(props.value) &&
+  const value = useMemo(() => {
+    if (!NumbersHelper.isInteger(props.value)) {
       console.warn(
         'A non-integer value was passed to InputInteger. It has been converted to integer.',
       )
+    }
+    return ~~props.value
   }, [props.value])
 
   const parseValue = ({ target: { value, matchedValue } }) => {

src/components/basic/Svg/Svg.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 
 const Svg = ({
   children,
@@ -8,13 +8,8 @@ const Svg = ({
   width = '100px',
   height = '100px',
 }) => {
-  const [viewboxWidth, setViewBoxWidth] = useState(size)
-  const [viewboxHeight, setViewBoxHeight] = useState(size)
-
-  useEffect(() => {
-    sizeH ? setViewBoxHeight(sizeH) : setViewBoxHeight(size)
-    sizeW ? setViewBoxWidth(sizeW) : setViewBoxWidth(size)
-  }, [sizeH, sizeW, size])
+  const viewboxWidth = sizeW || size
+  const viewboxHeight = sizeH || size
 
   return (
     <svg

src/components/composed/Charts/LineChart/LineChart.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useMemo } from 'react'
 
 import { Svg, Line } from '@BasicComponents'
 
@@ -37,19 +37,18 @@ const LineChart = ({
   height,
   width = '100px',
 }) => {
-  const [size, setSize] = useState({ w: 0, h: 0 })
-  const [proportionalHeight, setProportionalHeight] = useState()
-
-  useEffect(() => {
-    setSize({
+  const size = useMemo(
+    () => ({
       w: maxWidthPoint(points) + EXTRABOUNDARIES,
       h: parseInt(height) + EXTRABOUNDARIES,
-    })
-  }, [points, height])
+    }),
+    [points, height],
+  )
 
-  useEffect(() => {
-    setProportionalHeight(height || getProportionalHeight(size, width))
-  }, [width, height, size])
+  const proportionalHeight = useMemo(
+    () => height || getProportionalHeight(size, width),
+    [width, height, size],
+  )
 
   return (
     <Svg