From c6e4403f34ab4994a54da76af4462046ebff55f2 Mon Sep 17 00:00:00 2001
From: owlsua <allatsnow@gmail.com>
Date: Sun, 12 May 2024 23:19:39 +0200
Subject: [PATCH 1/4] feat: add textarea to restore the wallet

---
 .../RestoreSeedField/RestoreSeedField.css     | 12 +++++
 .../RestoreSeedField/RestoreSeedField.js      | 51 +++++++++++++++++++
 src/components/composed/index.js              |  2 +
 3 files changed, 65 insertions(+)
 create mode 100644 src/components/composed/RestoreSeedField/RestoreSeedField.css
 create mode 100644 src/components/composed/RestoreSeedField/RestoreSeedField.js

diff --git a/src/components/composed/RestoreSeedField/RestoreSeedField.css b/src/components/composed/RestoreSeedField/RestoreSeedField.css
new file mode 100644
index 00000000..cb8392b5
--- /dev/null
+++ b/src/components/composed/RestoreSeedField/RestoreSeedField.css
@@ -0,0 +1,12 @@
+.seed-textarea {
+  padding: 15px;
+  resize: none;
+}
+
+.seed-textarea.seed-invalid {
+  border-bottom: 2px solid rgb(var(--color-red));
+}
+
+.seed-textarea.seed-valid {
+  border-bottom: 2px solid rgb(var(--color-green));
+}
diff --git a/src/components/composed/RestoreSeedField/RestoreSeedField.js b/src/components/composed/RestoreSeedField/RestoreSeedField.js
new file mode 100644
index 00000000..02b2654c
--- /dev/null
+++ b/src/components/composed/RestoreSeedField/RestoreSeedField.js
@@ -0,0 +1,51 @@
+// import { useState } from 'react'
+import React, { useState } from 'react'
+
+import './RestoreSeedField.css'
+
+const isInputValid = (words, DefaultWordList = []) => {
+  if (words.length !== 12 && words.length !== 24) {
+    return false
+  }
+  return words?.length > 0
+    ? words.every((word) => DefaultWordList.includes(word))
+    : false
+}
+
+const RestoreSeedField = ({
+  setFields,
+  BIP39DefaultWordList,
+  accountWordsValid,
+  setAccountWordsValid,
+}) => {
+  const [textareaValue, setTextareaValue] = useState('')
+
+  const onChangeHandler = ({ target }) => {
+    setTextareaValue(target.value)
+    const words = target.value.trim().split(' ')
+    const isValid = isInputValid(words, BIP39DefaultWordList)
+    setAccountWordsValid(isValid)
+    setFields(words)
+  }
+
+  return (
+    <textarea
+      data-testid="restore-seed-textarea"
+      value={textareaValue}
+      onChange={onChangeHandler}
+      className={`seed-textarea ${
+        textareaValue && accountWordsValid
+          ? 'seed-valid'
+          : textareaValue && !accountWordsValid
+          ? 'seed-invalid'
+          : ''
+      }`}
+      name="textarea-seed"
+      id="textarea-seed"
+      cols="80"
+      rows="14"
+    />
+  )
+}
+
+export default RestoreSeedField
diff --git a/src/components/composed/index.js b/src/components/composed/index.js
index 84250d35..b4a95995 100644
--- a/src/components/composed/index.js
+++ b/src/components/composed/index.js
@@ -18,6 +18,7 @@ import SettingsTestnet from './SettingsTestnet/SettingsTestnet'
 import AddWallet from './AddWallet/AddWallet'
 import CurrentStaking from './CurrentStaking/CurrentStaking'
 import HelpTooltip from './HelpTooltip/HelpTooltip'
+import RestoreSeedField from './RestoreSeedField/RestoreSeedField'
 
 export {
   Balance,
@@ -40,4 +41,5 @@ export {
   AddWallet,
   CurrentStaking,
   HelpTooltip,
+  RestoreSeedField,
 }

From 2898dcf6b5f52a6dd70afe2821298625045bea69 Mon Sep 17 00:00:00 2001
From: owlsua <allatsnow@gmail.com>
Date: Sun, 12 May 2024 23:21:24 +0200
Subject: [PATCH 2/4] feat: replace inpunts with new component

---
 .../RestoreAccount/RestoreAccount.js          | 21 +++++--------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/src/components/containers/RestoreAccount/RestoreAccount.js b/src/components/containers/RestoreAccount/RestoreAccount.js
index 21ff9757..88190c9d 100644
--- a/src/components/containers/RestoreAccount/RestoreAccount.js
+++ b/src/components/containers/RestoreAccount/RestoreAccount.js
@@ -10,7 +10,7 @@ import {
   ProgressTracker,
   Header,
   TextField,
-  InputList,
+  RestoreSeedField,
   OptionButtons,
   WalletList,
 } from '@ComposedComponents'
@@ -112,8 +112,7 @@ const RestoreAccount = ({
     setAccountPasswordErrorMessage(message)
   }, [accountPasswordValid])
 
-  const getMnemonics = () =>
-    wordsFields.reduce((acc, word) => `${acc} ${word.value}`, '').trim()
+  const getMnemonics = () => wordsFields.join(' ').trim()
 
   const goToNextStep = () => {
     const mnemonics = getMnemonics()
@@ -201,15 +200,6 @@ const RestoreAccount = ({
 
   const genButtonTitle = (currentStep) => titles[currentStep] || 'Continue'
 
-  useEffect(() => {
-    const wordsValidity =
-      wordsFields.every((word) => word.validity) ||
-      (wordsFields.slice(0, 12).every((word) => word.validity) &&
-        wordsFields.slice(12, 23).every((word) => !word.validity))
-
-    setAccountWordsValid(wordsValidity)
-  }, [wordsFields, step])
-
   const handleError = (step) => {
     if (step === 6) alert('Please select a wallet type')
     if (step === 4)
@@ -297,12 +287,11 @@ const RestoreAccount = ({
             </CenteredLayout>
           )}
           {step === 4 && (
-            <InputList
-              fields={wordsFields}
+            <RestoreSeedField
               setFields={setWordsFields}
-              restoreMode
               BIP39DefaultWordList={defaultBTCWordList}
-              amountOfWords={24}
+              accountWordsValid={accountWordsValid}
+              setAccountWordsValid={setAccountWordsValid}
             />
           )}
           {step === 5 && (

From 7eea1507c0b554d501b368fb9fc6fc7ace9640c5 Mon Sep 17 00:00:00 2001
From: owlsua <allatsnow@gmail.com>
Date: Sun, 12 May 2024 23:21:51 +0200
Subject: [PATCH 3/4] test: update unit and e2e tests

---
 .../RestoreAccount/RestoreAccount.test.js     | 26 +++++++++---
 .../UseWalletInfo/useBtcWalletInfo.test.js    |  3 +-
 tests/02-restore-account.spec.js              | 42 +++++++++----------
 tests/helpers/hooks/useRestore.js             |  8 ++--
 4 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/components/containers/RestoreAccount/RestoreAccount.test.js b/src/components/containers/RestoreAccount/RestoreAccount.test.js
index 80f2d556..c4b4a7d9 100644
--- a/src/components/containers/RestoreAccount/RestoreAccount.test.js
+++ b/src/components/containers/RestoreAccount/RestoreAccount.test.js
@@ -10,6 +10,8 @@ import { BTC } from '@Cryptos'
 const SETSTEPSAMPLE = jest.fn()
 const ONSTEPSFINISHEDSAMPLE = jest.fn()
 const WORDSSAMPLE = ['car', 'house', 'cat']
+const SAMPLE_MNEMONIC =
+  'pave defy issue grant pear balance mad scatter summer weasel spend metal'
 
 test('Renders restore account page with step 1', () => {
   render(
@@ -187,17 +189,31 @@ test('Renders restore account page with step 4', () => {
   )
   const restoreAccountForm = screen.getByTestId('restore-account-form')
   const buttons = screen.getAllByTestId('button')
-  const inputs = screen.getAllByTestId('input')
+  const inputs = screen.getAllByTestId('restore-seed-textarea')
 
   expect(buttons).toHaveLength(3)
-  expect(inputs).toHaveLength(24)
+  expect(inputs).toHaveLength(1)
+  inputs.forEach((input) =>
+    expect(input).not.toHaveClass('seed-textarea seed-invalid'),
+  )
+  inputs.forEach((input) =>
+    expect(input).not.toHaveClass('seed-textarea seed-valid'),
+  )
 
-  inputs.forEach((input) => expect(input).toHaveAttribute('type', 'text'))
-  inputs.forEach((input) => expect(input).toHaveClass('invalid'))
   inputs.forEach((input) =>
     fireEvent.change(input, { target: { value: WORDSSAMPLE[0] } }),
   )
-  inputs.forEach((input) => expect(input).toHaveClass('valid'))
+
+  inputs.forEach((input) =>
+    expect(input).toHaveClass('seed-textarea seed-invalid'),
+  )
+
+  inputs.forEach((input) =>
+    fireEvent.change(input, { target: { value: SAMPLE_MNEMONIC } }),
+  )
+  inputs.forEach((input) =>
+    expect(input).toHaveClass('seed-textarea seed-valid'),
+  )
 
   act(() => {
     restoreAccountForm.submit()
diff --git a/src/hooks/UseWalletInfo/useBtcWalletInfo.test.js b/src/hooks/UseWalletInfo/useBtcWalletInfo.test.js
index 57203df8..ea2d6415 100644
--- a/src/hooks/UseWalletInfo/useBtcWalletInfo.test.js
+++ b/src/hooks/UseWalletInfo/useBtcWalletInfo.test.js
@@ -77,8 +77,7 @@ test('UseBtcWalletInfo hook', async () => {
   })
 
   expect(balance).toBe('0.02881771')
-  // TODO: +1 because of the message transaction. This is a temporary solution
-  expect(transactionsList.length).toBe(rawTransactions.length + 1)
+  expect(transactionsList.length).toBe(rawTransactions.length)
 })
 
 test('UseBtcWalletInfo hook, errors', async () => {
diff --git a/tests/02-restore-account.spec.js b/tests/02-restore-account.spec.js
index 93e5d35f..a500c96f 100644
--- a/tests/02-restore-account.spec.js
+++ b/tests/02-restore-account.spec.js
@@ -39,33 +39,33 @@ const restoreAccountTest = async ({ page }) => {
 
   await page.waitForTimeout(1000)
 
-  const backupInputs = await page.$$('input[type="text"]')
-  expect(backupInputs.length).toBe(24)
-  for (let i = 0; i < backupInputs.length - 12; i++) {
-    await backupInputs[i].fill(MNEMONIC[i])
-  }
+  const textarea = await page.$$('textarea')
+  expect(textarea.length).toBe(1)
+
+  const mnemonicString = MNEMONIC.join(' ')
+  await textarea[0].fill(mnemonicString)
 
   await page.getByRole('button', { name: 'Continue' }).click()
 
-   await page.getByRole('button', { name: 'Bitcoin (BTC)' }).click()
-   await page.getByRole('button', { name: 'Mintlayer (ML)' }).click()
-   
-   await page.getByRole('button', { name: 'Confirm' }).click()
-   
-   await page.getByRole('button', { name: 'Segwit' }).click()
-   
-   await page.getByRole('button', { name: 'Confirm' }).click()
-
-   await page.waitForSelector(`:text("${WALLET_NAME}")`)
-   await expect(page.locator(`:text("${WALLET_NAME}")`)).toBeVisible()
-
-   await page.waitForSelector(':text("Mintlayer (ML)")')
-   await expect(page.locator(':text("Bitcoin (BTC)")')).toBeVisible()
-   await expect(page.locator(':text("Mintlayer (ML)")')).toBeVisible()
+  await page.getByRole('button', { name: 'Bitcoin (BTC)' }).click()
+  await page.getByRole('button', { name: 'Mintlayer (ML)' }).click()
+
+  await page.getByRole('button', { name: 'Confirm' }).click()
+
+  await page.getByRole('button', { name: 'Segwit' }).click()
+
+  await page.getByRole('button', { name: 'Confirm' }).click()
+
+  await page.waitForSelector(`:text("${WALLET_NAME}")`)
+  await expect(page.locator(`:text("${WALLET_NAME}")`)).toBeVisible()
+
+  await page.waitForSelector(':text("Mintlayer (ML)")')
+  await expect(page.locator(':text("Bitcoin (BTC)")')).toBeVisible()
+  await expect(page.locator(':text("Mintlayer (ML)")')).toBeVisible()
 }
 
 test('Restore account', restoreAccountTest)
 
 export const login = async (page) => {
   await restoreAccountTest({ page })
-}
\ No newline at end of file
+}
diff --git a/tests/helpers/hooks/useRestore.js b/tests/helpers/hooks/useRestore.js
index 57dea0e0..33b7516f 100644
--- a/tests/helpers/hooks/useRestore.js
+++ b/tests/helpers/hooks/useRestore.js
@@ -14,10 +14,10 @@ export const useRestoreWallet = async (page, walletType) => {
 
   await page.waitForTimeout(1000)
 
-  const backupInputs = await page.$$('input[type="text"]')
-  for (let i = 0; i < backupInputs.length - 12; i++) {
-    await backupInputs[i].fill(wallet.MNEMONIC[i])
-  }
+  const textarea = await page.$$('textarea')
+  const mnemonicString = wallet.MNEMONIC.join(' ')
+
+  await textarea[0].fill(mnemonicString)
   await page.getByRole('button', { name: 'Continue' }).click()
 
   await page.getByRole('button', { name: 'Bitcoin (BTC)' }).click()

From dc18f8a5704f051d09ed49345efef192d8bc8871 Mon Sep 17 00:00:00 2001
From: owlsua <allatsnow@gmail.com>
Date: Mon, 13 May 2024 14:40:22 +0200
Subject: [PATCH 4/4] feat: move validation to the form

---
 .../RestoreSeedField/RestoreSeedField.js      | 36 +++++++------------
 .../RestoreAccount/RestoreAccount.js          | 14 ++++++++
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/composed/RestoreSeedField/RestoreSeedField.js b/src/components/composed/RestoreSeedField/RestoreSeedField.js
index 02b2654c..b4ff6d82 100644
--- a/src/components/composed/RestoreSeedField/RestoreSeedField.js
+++ b/src/components/composed/RestoreSeedField/RestoreSeedField.js
@@ -3,43 +3,31 @@ import React, { useState } from 'react'
 
 import './RestoreSeedField.css'
 
-const isInputValid = (words, DefaultWordList = []) => {
-  if (words.length !== 12 && words.length !== 24) {
-    return false
-  }
-  return words?.length > 0
-    ? words.every((word) => DefaultWordList.includes(word))
-    : false
-}
-
-const RestoreSeedField = ({
-  setFields,
-  BIP39DefaultWordList,
-  accountWordsValid,
-  setAccountWordsValid,
-}) => {
+const RestoreSeedField = ({ setFields, accountWordsValid }) => {
   const [textareaValue, setTextareaValue] = useState('')
 
   const onChangeHandler = ({ target }) => {
     setTextareaValue(target.value)
     const words = target.value.trim().split(' ')
-    const isValid = isInputValid(words, BIP39DefaultWordList)
-    setAccountWordsValid(isValid)
     setFields(words)
   }
 
+  const getExtraClasses = () => {
+    if (textareaValue && accountWordsValid) {
+      return 'seed-valid'
+    } else if (textareaValue && !accountWordsValid) {
+      return 'seed-invalid'
+    } else {
+      return ''
+    }
+  }
+
   return (
     <textarea
       data-testid="restore-seed-textarea"
       value={textareaValue}
       onChange={onChangeHandler}
-      className={`seed-textarea ${
-        textareaValue && accountWordsValid
-          ? 'seed-valid'
-          : textareaValue && !accountWordsValid
-          ? 'seed-invalid'
-          : ''
-      }`}
+      className={`seed-textarea ${getExtraClasses()}`}
       name="textarea-seed"
       id="textarea-seed"
       cols="80"
diff --git a/src/components/containers/RestoreAccount/RestoreAccount.js b/src/components/containers/RestoreAccount/RestoreAccount.js
index 88190c9d..e51ad6e1 100644
--- a/src/components/containers/RestoreAccount/RestoreAccount.js
+++ b/src/components/containers/RestoreAccount/RestoreAccount.js
@@ -93,6 +93,20 @@ const RestoreAccount = ({
 
   const navigate = useNavigate()
 
+  const isSeedValid = (words, DefaultWordList = []) => {
+    if (words.length !== 12 && words.length !== 24) {
+      return false
+    }
+    return words?.length > 0
+      ? words.every((word) => DefaultWordList.includes(word))
+      : false
+  }
+
+  useEffect(() => {
+    const isValid = isSeedValid(wordsFields, defaultBTCWordList)
+    setAccountWordsValid(isValid)
+  }, [wordsFields, defaultBTCWordList])
+
   useEffect(() => {
     const message = !accountNameValid
       ? 'The wallet name should have at least 4 characteres.'