A-1211619233334096: seed phrase validation (#250)

* style: error and textarea styles improvements

* feat: improve seed pharase validation

* refactoring: restore account page

* test: add new unit tests

* bump version

Author: owlsua

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "private": true,
   "dependencies": {
     "@bitcoinerlab/secp256k1": "^1.2.0",
@@ -19,7 +19,6 @@
     "date-fns": "^4.1.0",
     "decimal.js": "^10.6.0",
     "ecpair": "3.0.0",
-    "jest-webgl-canvas-mock": "^2.5.3",
     "konva": "^10.2.0",
     "node-forge": "^1.3.3",
     "pbkdf2": "^3.1.5",
@@ -88,6 +87,7 @@
     "jest": "^30.2.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^30.2.0",
+    "jest-webgl-canvas-mock": "^2.5.3",
     "prettier": "^3.8.1",
     "pretty-quick": "^4.2.2",
     "style-loader": "^4.0.0",

package.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Mojito - A Mintlayer Wallet",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "short_name": "Mojito",
   "description": "Mojito is a non-custodial decentralized crypto wallet that lets you send and receive BTC and ML from any other address.",
   "homepage_url": "https://www.mintlayer.org/",

public/manifestDefault.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Mojito - A Mintlayer Wallet",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Mojito is a non-custodial decentralized crypto wallet that lets you send and receive BTC and ML from any other address.",
   "homepage_url": "https://www.mintlayer.org/",
   "icons": {

public/manifestFirefox.json

@@ -6,5 +6,5 @@
 .errorMessage * {
   color: rgb(var(--color-red));
   text-align: center;
-  font-weight: bold;
+  font-weight: 600;
 }

src/components/basic/Error/Error.css

@@ -1,6 +1,6 @@
 .textarea {
   width: 100%;
-  padding: 15px;
+  padding: 15px 15px 30px;
   resize: none;
   border: 1px solid rgb(var(--color-light-gray));
   border-radius: var(--round-size);

src/components/basic/Textarea/Textarea.css

@@ -0,0 +1,17 @@
+.seed-field-wrapper {
+  position: relative;
+}
+
+.seed-word-counter {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  font-size: 0.75rem;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.seed-word-counter.counter-valid {
+  color: var(--success-color, #43a047);
+  opacity: 1;
+}

src/components/composed/RestoreSeedField/RestoreSeedField.css

@@ -1,12 +1,16 @@
 import { useState } from 'react'
 import { Textarea } from '@BasicComponents'
 
+import './RestoreSeedField.css'
+
 const RestoreSeedField = ({ setFields, accountWordsValid }) => {
   const [textareaValue, setTextareaValue] = useState('')
+  const [wordCount, setWordCount] = useState(0)
 
   const onChangeHandler = ({ target }) => {
     setTextareaValue(target.value)
-    const words = target.value.trim().split(' ')
+    const words = target.value.trim().split(/\s+/).filter(Boolean)
+    setWordCount(words.length)
     setFields(words)
   }
 
@@ -15,14 +19,33 @@ const RestoreSeedField = ({ setFields, accountWordsValid }) => {
     rows: 14,
   }
 
+  const getCounterLabel = () => {
+    if (wordCount === 0) return null
+    if (wordCount <= 12) return `${wordCount} / 12`
+    if (wordCount <= 24) return `${wordCount} / 24`
+    return `${wordCount} / 24`
+  }
+
+  const counterLabel = getCounterLabel()
+
   return (
-    <Textarea
-      value={textareaValue}
-      onChange={onChangeHandler}
-      id="restore-seed-textarea"
-      size={textariaSize}
-      validity={accountWordsValid}
-    />
+    <div className="seed-field-wrapper">
+      <Textarea
+        value={textareaValue}
+        onChange={onChangeHandler}
+        id="restore-seed-textarea"
+        size={textariaSize}
+        validity={accountWordsValid}
+      />
+      {counterLabel && (
+        <p
+          className={`seed-word-counter${accountWordsValid ? ' counter-valid' : ''}`}
+          data-testid="seed-word-counter"
+        >
+          {counterLabel}
+        </p>
+      )}
+    </div>
   )
 }
 

src/components/composed/RestoreSeedField/RestoreSeedField.js

@@ -123,16 +123,194 @@ describe('RestoreSeedField', () => {
       target: { value: 'word1   word2    word3' },
     })
 
-    // Note: split(' ') will create empty strings for multiple spaces
+    expect(mockSetFields).toHaveBeenCalledWith(['word1', 'word2', 'word3'])
+  })
+
+  it('handles newlines between words (copy-paste from password manager)', () => {
+    render(
+      <RestoreSeedField
+        setFields={mockSetFields}
+        accountWordsValid={true}
+      />,
+    )
+
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, {
+      target: { value: 'word1\nword2\nword3' },
+    })
+
+    expect(mockSetFields).toHaveBeenCalledWith(['word1', 'word2', 'word3'])
+  })
+
+  it('handles tabs between words', () => {
+    render(
+      <RestoreSeedField
+        setFields={mockSetFields}
+        accountWordsValid={true}
+      />,
+    )
+
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, {
+      target: { value: 'word1\tword2\tword3' },
+    })
+
+    expect(mockSetFields).toHaveBeenCalledWith(['word1', 'word2', 'word3'])
+  })
+
+  it('handles trailing space without adding empty word', () => {
+    render(
+      <RestoreSeedField
+        setFields={mockSetFields}
+        accountWordsValid={true}
+      />,
+    )
+
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, {
+      target: { value: 'word1 word2 word3 ' },
+    })
+
+    expect(mockSetFields).toHaveBeenCalledWith(['word1', 'word2', 'word3'])
+  })
+
+  it('handles mixed whitespace (spaces, newlines, tabs)', () => {
+    render(
+      <RestoreSeedField
+        setFields={mockSetFields}
+        accountWordsValid={true}
+      />,
+    )
+
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, {
+      target: { value: 'word1  word2\nword3\t word4' },
+    })
+
     expect(mockSetFields).toHaveBeenCalledWith([
       'word1',
-      '',
-      '',
       'word2',
-      '',
-      '',
-      '',
       'word3',
+      'word4',
     ])
   })
+
+  it('returns empty array for blank input', () => {
+    render(
+      <RestoreSeedField
+        setFields={mockSetFields}
+        accountWordsValid={false}
+      />,
+    )
+
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, {
+      target: { value: '   ' },
+    })
+
+    expect(mockSetFields).toHaveBeenCalledWith([])
+  })
+
+  it('does not show counter when input is empty', () => {
+    render(
+      <RestoreSeedField
+        setFields={mockSetFields}
+        accountWordsValid={false}
+      />,
+    )
+
+    expect(screen.queryByTestId('seed-word-counter')).not.toBeInTheDocument()
+  })
+
+  it('shows counter as N/12 when word count is 12 or less', () => {
+    render(
+      <RestoreSeedField
+        setFields={mockSetFields}
+        accountWordsValid={false}
+      />,
+    )
+
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, { target: { value: 'word1 word2 word3' } })
+
+    expect(screen.getByTestId('seed-word-counter')).toHaveTextContent('3 / 12')
+  })
+
+  it('shows counter as 12/12 when exactly 12 words', () => {
+    render(
+      <RestoreSeedField
+        setFields={mockSetFields}
+        accountWordsValid={false}
+      />,
+    )
+
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, {
+      target: { value: 'a b c d e f g h i j k l' },
+    })
+
+    expect(screen.getByTestId('seed-word-counter')).toHaveTextContent('12 / 12')
+  })
+
+  it('shows counter as N/24 when word count is between 13 and 24', () => {
+    render(
+      <RestoreSeedField
+        setFields={mockSetFields}
+        accountWordsValid={false}
+      />,
+    )
+
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, {
+      target: { value: 'a b c d e f g h i j k l m' },
+    })
+
+    expect(screen.getByTestId('seed-word-counter')).toHaveTextContent('13 / 24')
+  })
+
+  it('shows counter as 24/24 when exactly 24 words', () => {
+    render(
+      <RestoreSeedField
+        setFields={mockSetFields}
+        accountWordsValid={false}
+      />,
+    )
+
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, {
+      target: { value: 'a b c d e f g h i j k l m n o p q r s t u v w x' },
+    })
+
+    expect(screen.getByTestId('seed-word-counter')).toHaveTextContent('24 / 24')
+  })
+
+  it('counter has counter-valid class when accountWordsValid is true', () => {
+    render(
+      <RestoreSeedField
+        setFields={mockSetFields}
+        accountWordsValid={true}
+      />,
+    )
+
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, { target: { value: 'word1 word2' } })
+
+    expect(screen.getByTestId('seed-word-counter')).toHaveClass('counter-valid')
+  })
+
+  it('counter does not have counter-valid class when accountWordsValid is false', () => {
+    render(
+      <RestoreSeedField
+        setFields={mockSetFields}
+        accountWordsValid={false}
+      />,
+    )
+
+    const textarea = screen.getByRole('textbox')
+    fireEvent.change(textarea, { target: { value: 'word1 word2' } })
+
+    expect(screen.getByTestId('seed-word-counter')).not.toHaveClass(
+      'counter-valid',
+    )
+  })
 })