diff --git a/test/e2e/address-book.spec.js b/test/e2e/address-book.spec.js index 8d0d7ac8c..02d391cb4 100644 --- a/test/e2e/address-book.spec.js +++ b/test/e2e/address-book.spec.js @@ -98,7 +98,7 @@ describe('MetaMask', function () { }) async function clickWordAndWait (word) { - await driver.clickElement(By.css(`[data-testid="seed-phrase-shuffled"] [data-testid="draggable-seed-${word}"]`)) + await driver.clickElement(By.css(`[data-testid="seed-phrase-sorted"] [data-testid="draggable-seed-${word}"]`)) await driver.delay(tinyDelayMs) } diff --git a/test/e2e/incremental-security.spec.js b/test/e2e/incremental-security.spec.js index 3287ca0ae..734655b81 100644 --- a/test/e2e/incremental-security.spec.js +++ b/test/e2e/incremental-security.spec.js @@ -171,7 +171,7 @@ describe('MetaMask', function () { }) async function clickWordAndWait (word) { - await driver.clickElement(By.css(`[data-testid="seed-phrase-shuffled"] [data-testid="draggable-seed-${word}"]`)) + await driver.clickElement(By.css(`[data-testid="seed-phrase-sorted"] [data-testid="draggable-seed-${word}"]`)) await driver.delay(tinyDelayMs) } diff --git a/test/e2e/metamask-responsive-ui.spec.js b/test/e2e/metamask-responsive-ui.spec.js index f0d66746d..6dda0192c 100644 --- a/test/e2e/metamask-responsive-ui.spec.js +++ b/test/e2e/metamask-responsive-ui.spec.js @@ -93,7 +93,7 @@ describe('MetaMask', function () { }) async function clickWordAndWait (word) { - await driver.clickElement(By.css(`[data-testid="seed-phrase-shuffled"] [data-testid="draggable-seed-${word}"]`)) + await driver.clickElement(By.css(`[data-testid="seed-phrase-sorted"] [data-testid="draggable-seed-${word}"]`)) await driver.delay(tinyDelayMs) } diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index bc6b94c56..d3f5f6e5e 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -95,7 +95,7 @@ describe('MetaMask', function () { }) async function clickWordAndWait (word) { - await driver.clickElement(By.css(`[data-testid="seed-phrase-shuffled"] [data-testid="draggable-seed-${word}"]`)) + await driver.clickElement(By.css(`[data-testid="seed-phrase-sorted"] [data-testid="draggable-seed-${word}"]`)) await driver.delay(tinyDelayMs) } diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js index 2b6d5ceee..2f04a9055 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js @@ -1,7 +1,6 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import { shuffle } from 'lodash' import Button from '../../../../components/ui/button' import { INITIALIZE_END_OF_FLOW_ROUTE, @@ -34,7 +33,7 @@ export default class ConfirmSeedPhrase extends PureComponent { state = { selectedSeedIndices: [], - shuffledSeedWords: [], + sortedSeedWords: [], pendingSeedIndices: [], draggingSeedIndex: -1, hoveringIndex: -1, @@ -42,8 +41,8 @@ export default class ConfirmSeedPhrase extends PureComponent { componentDidMount () { const { seedPhrase = '' } = this.props - const shuffledSeedWords = shuffle(seedPhrase.split(' ')) || [] - this.setState({ shuffledSeedWords }) + const sortedSeedWords = (seedPhrase.split(' ') || []).sort() + this.setState({ sortedSeedWords }) } setDraggingSeedIndex = draggingSeedIndex => this.setState({ draggingSeedIndex }) @@ -106,24 +105,24 @@ export default class ConfirmSeedPhrase extends PureComponent { } } - handleSelectSeedWord = (shuffledIndex) => { + handleSelectSeedWord = (index) => { this.setState({ - selectedSeedIndices: [...this.state.selectedSeedIndices, shuffledIndex], - pendingSeedIndices: [...this.state.pendingSeedIndices, shuffledIndex], + selectedSeedIndices: [...this.state.selectedSeedIndices, index], + pendingSeedIndices: [...this.state.pendingSeedIndices, index], }) } - handleDeselectSeedWord = shuffledIndex => { + handleDeselectSeedWord = (index) => { this.setState({ - selectedSeedIndices: this.state.selectedSeedIndices.filter(i => shuffledIndex !== i), - pendingSeedIndices: this.state.pendingSeedIndices.filter(i => shuffledIndex !== i), + selectedSeedIndices: this.state.selectedSeedIndices.filter(i => index !== i), + pendingSeedIndices: this.state.pendingSeedIndices.filter(i => index !== i), }) } isValid () { const { seedPhrase } = this.props - const { selectedSeedIndices, shuffledSeedWords } = this.state - const selectedSeedWords = selectedSeedIndices.map(i => shuffledSeedWords[i]) + const { selectedSeedIndices, sortedSeedWords } = this.state + const selectedSeedWords = selectedSeedIndices.map(i => sortedSeedWords[i]) return seedPhrase === selectedSeedWords.join(' ') } @@ -132,7 +131,7 @@ export default class ConfirmSeedPhrase extends PureComponent { const { history } = this.props const { selectedSeedIndices, - shuffledSeedWords, + sortedSeedWords, draggingSeedIndex, } = this.state @@ -163,9 +162,9 @@ export default class ConfirmSeedPhrase extends PureComponent { { this.renderPendingSeeds() } { this.renderSelectedSeeds() } -
+
{ - shuffledSeedWords.map((word, index) => { + sortedSeedWords.map((word, index) => { const isSelected = selectedSeedIndices.includes(index) return ( @@ -175,7 +174,7 @@ export default class ConfirmSeedPhrase extends PureComponent { index={index} setHoveringIndex={this.setHoveringIndex} onDrop={this.onDrop} - className="confirm-seed-phrase__seed-word--shuffled" + className="confirm-seed-phrase__seed-word--sorted" selected={isSelected} onClick={() => { if (!isSelected) { @@ -203,10 +202,10 @@ export default class ConfirmSeedPhrase extends PureComponent { } renderSelectedSeeds () { - const { shuffledSeedWords, selectedSeedIndices, draggingSeedIndex } = this.state + const { sortedSeedWords, selectedSeedIndices, draggingSeedIndex } = this.state return EMPTY_SEEDS.map((_, index) => { const seedIndex = selectedSeedIndices[index] - const word = shuffledSeedWords[seedIndex] + const word = sortedSeedWords[seedIndex] return ( { const seedIndex = indices[index] - const word = shuffledSeedWords[seedIndex] + const word = sortedSeedWords[seedIndex] return ( { }) assert.equal( - root.find('.confirm-seed-phrase__seed-word--shuffled').length, + root.find('.confirm-seed-phrase__seed-word--sorted').length, 12, 'should render 12 seed phrases' ) @@ -42,7 +42,7 @@ describe('ConfirmSeedPhrase Component', () => { } ) - const seeds = root.find('.confirm-seed-phrase__seed-word--shuffled') + const seeds = root.find('.confirm-seed-phrase__seed-word--sorted') // Click on 3 seeds to add to selected seeds.at(0).simulate('click') @@ -59,7 +59,7 @@ describe('ConfirmSeedPhrase Component', () => { root.state() root.update() root.state() - root.find('.confirm-seed-phrase__seed-word--shuffled').at(1).simulate('click') + root.find('.confirm-seed-phrase__seed-word--sorted').at(1).simulate('click') assert.deepEqual( root.state().selectedSeedIndices, [0, 2], @@ -80,7 +80,7 @@ describe('ConfirmSeedPhrase Component', () => { } ) - const seeds = root.find('.confirm-seed-phrase__seed-word--shuffled') + const seeds = root.find('.confirm-seed-phrase__seed-word--sorted') // Click on 3 seeds to add to selected seeds.at(0).simulate('click') @@ -113,7 +113,7 @@ describe('ConfirmSeedPhrase Component', () => { } ) - const seeds = root.find('.confirm-seed-phrase__seed-word--shuffled') + const seeds = root.find('.confirm-seed-phrase__seed-word--sorted') // Click on 3 seeds to add to selected seeds.at(0).simulate('click') @@ -148,12 +148,12 @@ describe('ConfirmSeedPhrase Component', () => { } ) - const shuffled = root.state().shuffledSeedWords - const seeds = root.find('.confirm-seed-phrase__seed-word--shuffled') + const sorted = root.state().sortedSeedWords + const seeds = root.find('.confirm-seed-phrase__seed-word--sorted') originalSeed.forEach(seed => { - const seedIndex = shuffled.findIndex(s => s === seed) + const seedIndex = sorted.findIndex(s => s === seed) seeds.at(seedIndex).simulate('click') })