A-1213877919321098: migrate Cipher to Web Crypto API (#252)

* refactor: migrate Cipher to Web Crypto API and add KDF iteration support

Replace node-forge and pbkdf2 with native crypto.subtle for PBKDF2,
AES-GCM, and random byte generation. Store kdfIterations per account
and auto-migrate legacy accounts from 10k to 600k iterations on login.

* refactor: remove entropy drawing board, use crypto.getRandomValues for mnemonic generation

Replace mouse-drawn entropy with cryptographically secure crypto.getRandomValues(16 bytes)
for BIP39 mnemonic generation. Remove Entropy component, related state, and renumber
CreateAccount steps from 6 to 5.

* refactor: replace unnecessary state+useEffect with derived values and useMemo

* feat: update constants

* test: update unit tests

* fix: simplify mnemonic generation

* refactor: replace kdfIterations with versioned encryption config

Use encryptionVersion field in accounts instead of raw kdfIterations.
Each version inherits from previous, making it easy to add new encryption
parameters (encoding, hexWrap, etc.) in future versions.

* test: add encryption tests

Author: owlsua

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-lock.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"
   }
 }

package.json

@@ -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:',

public/background.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/Button/Button.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/InputFloat.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/Input/InputInteger.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/basic/Svg/Svg.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