Merge pull request #199 from mintlayer/dev

Dev-08-12-2024

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npm run prettier && npm run lint && npm test -- --watchAll=false

package.json

@@ -3,6 +3,7 @@
   "version": "1.3.4",
   "private": true,
   "dependencies": {
+    "@bitcoin-js/tiny-secp256k1-asmjs": "^2.2.3",
     "@mintlayer/entropy-generator": "^1.0.4",
     "bip32": "^4.0.0",
     "bip39": "^3.1.0",
@@ -22,9 +23,8 @@
     "react-dom": "^18.3.1",
     "react-konva": "^18.2.10",
     "react-qr-code": "^2.0.15",
-    "react-router-dom": "^6.27.0",
+    "react-router-dom": "^6.28.0",
     "stream-browserify": "^3.0.0",
-    "@bitcoin-js/tiny-secp256k1-asmjs": "^2.2.3",
     "web-vitals": "^4.2.4"
   },
   "scripts": {
@@ -33,8 +33,8 @@
     "build": "env-cmd -f ./.env.production react-app-rewired build && sh packing.sh",
     "test": "NODE_ENV=test react-scripts --openssl-legacy-provider test a --testPathIgnorePatterns='src/pages'",
     "coverage": "npm test -- --coverage ",
-    "serve": "http-server -p 8000 build/ ",
-    "e2e": "npx playwright test",
+    "serve": "npm run build && http-server -p 8000 build/ ",
+    "e2e": "npx playwright test --workers=1",
     "e2e:debug": "npx playwright test --headed",
     "e2e:ui": "npx playwright test --ui",
     "eject": "react-scripts eject",
@@ -157,15 +157,15 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@playwright/test": "^1.48.2",
     "@svgr/webpack": "^8.1.0",
-    "@types/node": "^22.8.6",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^22.9.0",
     "@types/tiny-secp256k1": "^2.0.1",
     "dotenv-webpack": "^8.1.0",
     "ecpair": "^2.1.0",

playwright.config.js

@@ -13,7 +13,7 @@ const { defineConfig, devices } = require('@playwright/test')
 module.exports = defineConfig({
   testDir: './tests',
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
@@ -71,8 +71,8 @@ module.exports = defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'npm run start',
-    url: 'http://127.0.0.1:3000',
+    command: 'npm run serve',
+    url: 'http://localhost:8000/',
     reuseExistingServer: !process.env.CI,
   },
 })

public/index.css

@@ -2,7 +2,7 @@
   html {
     display: flex;
     justify-content: center;
-    padding: 30px 0 0 0;
+    padding: 30px 0 30px 0;
     height: 100vh;
   }
 

src/assets/styles/index.css

@@ -49,12 +49,28 @@ body {
   height: 600px;
   width: 800px;
   background: rgb(var(--color-white));
+
+  @media screen and (min-width: 801px) {
+    height: auto;
+    border-radius: 30px;
+    width: 90vh;
+  }
+}
+
+#root {
+  height: 100%;
 }
 
 .App {
   position: relative;
-  min-height: 600px;
+  display: flex;
+  flex-direction: column;
+  height: 600px;
   padding: 2rem 2.875rem;
+
+  @media screen and (min-width: 801px) {
+    height: 100%;
+  }
 }
 
 .center-text {
@@ -89,9 +105,3 @@ body {
   color: rgb(var(--color-green));
   text-decoration: none;
 }
-
-@media screen and (min-width: 801px) {
-  body {
-    border-radius: 30px;
-  }
-}

src/components/basic/Button/Button.css

@@ -14,8 +14,12 @@
   width: fit-content;
 }
 
+.btn svg {
+  max-height: 40px;
+}
+
 .btn:hover svg path {
-  stroke: rgb(var(--color-green));
+  fill: rgb(var(--color-green));
 }
 
 .btn:disabled,

src/components/basic/Input/Input.js

@@ -97,6 +97,7 @@ const Input = ({
       pattern={pattern}
       disabled={disabled ? 'disabled' : ''}
       ref={ref}
+      autoComplete="off"
     />
   )
 }

src/components/basic/Logo/Logo.css

@@ -1,15 +1,14 @@
 .logoContainer {
   position: relative;
   display: flex;
-  margin: 0 auto;
   justify-content: space-between;
   line-height: 60px;
-  width: 205px;
+  width: 200px;
 }
 
 .logoContainer .logo {
-  width: 60px;
-  height: 60px;
+  width: 55px;
+  height: 55px;
   margin: 0;
 }
 

src/components/basic/Logo/Logo.js

@@ -8,7 +8,10 @@ const Logo = () => {
   const { networkType } = useContext(SettingsContext)
 
   return (
-    <div className="logoContainer">
+    <div
+      className="logoContainer"
+      data-testid="logo-container"
+    >
       <LogoIcon
         className="logo"
         data-testid="logo"

src/components/basic/Textarea/Textarea.js

@@ -25,9 +25,10 @@ const Textarea = ({
       return ''
     }
   }
-  const onChangeHandler = ({ target }) => {
-    onChange && onChange({ target })
-    setTextareaValue(target.value)
+  const onChangeHandler = (event) => {
+    const newValue = event.target.value
+    setTextareaValue(newValue)
+    onChange && onChange({ target: { value: newValue } })
     getExtraClasses()
   }