A-1207016712716742: single field for the seed phrase

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));
+}

src/components/composed/RestoreSeedField/RestoreSeedField.js

@@ -0,0 +1,39 @@
+// import { useState } from 'react'
+import React, { useState } from 'react'
+
+import './RestoreSeedField.css'
+
+const RestoreSeedField = ({ setFields, accountWordsValid }) => {
+  const [textareaValue, setTextareaValue] = useState('')
+
+  const onChangeHandler = ({ target }) => {
+    setTextareaValue(target.value)
+    const words = target.value.trim().split(' ')
+    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 ${getExtraClasses()}`}
+      name="textarea-seed"
+      id="textarea-seed"
+      cols="80"
+      rows="14"
+    />
+  )
+}
+
+export default RestoreSeedField

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,
 }

src/components/containers/RestoreAccount/RestoreAccount.js

@@ -10,7 +10,7 @@ import {
   ProgressTracker,
   Header,
   TextField,
-  InputList,
+  RestoreSeedField,
   OptionButtons,
   WalletList,
 } from '@ComposedComponents'
@@ -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.'
@@ -112,8 +126,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 +214,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 +301,11 @@ const RestoreAccount = ({
             </CenteredLayout>
           )}
           {step === 4 && (
-            <InputList
-              fields={wordsFields}
+            <RestoreSeedField
               setFields={setWordsFields}
-              restoreMode
               BIP39DefaultWordList={defaultBTCWordList}
-              amountOfWords={24}
+              accountWordsValid={accountWordsValid}
+              setAccountWordsValid={setAccountWordsValid}
             />
           )}
           {step === 5 && (

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()

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 () => {

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 })
-}
+}

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()