m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Sorting seed phrase confirmation buttons alphabetically (#7933)

Browse Source
This commit is contained in:
ryanml 2020-01-29 11:42:46 -08:00 committed by GitHub
parent 6c616b0d83
commit 07ce849c48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/e2e/address-book.spec.js
View File

@ -98,7 +98,7 @@ describe('MetaMask', function () {
}) })
async function clickWordAndWait (word) { 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) await driver.delay(tinyDelayMs)
} }

2
test/e2e/incremental-security.spec.js
View File

@ -171,7 +171,7 @@ describe('MetaMask', function () {
}) })
async function clickWordAndWait (word) { 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) await driver.delay(tinyDelayMs)
} }

2
test/e2e/metamask-responsive-ui.spec.js
View File

@ -93,7 +93,7 @@ describe('MetaMask', function () {
}) })
async function clickWordAndWait (word) { 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) await driver.delay(tinyDelayMs)
} }

2
test/e2e/metamask-ui.spec.js
View File

@ -95,7 +95,7 @@ describe('MetaMask', function () {
}) })
async function clickWordAndWait (word) { 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) await driver.delay(tinyDelayMs)
} }

39
ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
View File

@ -1,7 +1,6 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import classnames from 'classnames' import classnames from 'classnames'
import { shuffle } from 'lodash'
import Button from '../../../../components/ui/button' import Button from '../../../../components/ui/button'
import { import {
INITIALIZE_END_OF_FLOW_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE,
@ -34,7 +33,7 @@ export default class ConfirmSeedPhrase extends PureComponent {
state = { state = {
selectedSeedIndices: [], selectedSeedIndices: [],
shuffledSeedWords: [], sortedSeedWords: [],
pendingSeedIndices: [], pendingSeedIndices: [],
draggingSeedIndex: -1, draggingSeedIndex: -1,
hoveringIndex: -1, hoveringIndex: -1,
@ -42,8 +41,8 @@ export default class ConfirmSeedPhrase extends PureComponent {
componentDidMount () { componentDidMount () {
const { seedPhrase = '' } = this.props const { seedPhrase = '' } = this.props
const shuffledSeedWords = shuffle(seedPhrase.split(' ')) || [] const sortedSeedWords = (seedPhrase.split(' ') || []).sort()
this.setState({ shuffledSeedWords }) this.setState({ sortedSeedWords })
} }
setDraggingSeedIndex = draggingSeedIndex => this.setState({ draggingSeedIndex }) setDraggingSeedIndex = draggingSeedIndex => this.setState({ draggingSeedIndex })
@ -106,24 +105,24 @@ export default class ConfirmSeedPhrase extends PureComponent {
} }
} }
handleSelectSeedWord = (shuffledIndex) => { handleSelectSeedWord = (index) => {
this.setState({ this.setState({
selectedSeedIndices: [...this.state.selectedSeedIndices, shuffledIndex], selectedSeedIndices: [...this.state.selectedSeedIndices, index],
pendingSeedIndices: [...this.state.pendingSeedIndices, shuffledIndex], pendingSeedIndices: [...this.state.pendingSeedIndices, index],
}) })
} }
handleDeselectSeedWord = shuffledIndex => { handleDeselectSeedWord = (index) => {
this.setState({ this.setState({
selectedSeedIndices: this.state.selectedSeedIndices.filter(i => shuffledIndex !== i), selectedSeedIndices: this.state.selectedSeedIndices.filter(i => index !== i),
pendingSeedIndices: this.state.pendingSeedIndices.filter(i => shuffledIndex !== i), pendingSeedIndices: this.state.pendingSeedIndices.filter(i => index !== i),
}) })
} }
isValid () { isValid () {
const { seedPhrase } = this.props const { seedPhrase } = this.props
const { selectedSeedIndices, shuffledSeedWords } = this.state const { selectedSeedIndices, sortedSeedWords } = this.state
const selectedSeedWords = selectedSeedIndices.map(i => shuffledSeedWords[i]) const selectedSeedWords = selectedSeedIndices.map(i => sortedSeedWords[i])
return seedPhrase === selectedSeedWords.join(' ') return seedPhrase === selectedSeedWords.join(' ')
} }
@ -132,7 +131,7 @@ export default class ConfirmSeedPhrase extends PureComponent {
const { history } = this.props const { history } = this.props
const { const {
selectedSeedIndices, selectedSeedIndices,
shuffledSeedWords, sortedSeedWords,
draggingSeedIndex, draggingSeedIndex,
} = this.state } = this.state
@ -163,9 +162,9 @@ export default class ConfirmSeedPhrase extends PureComponent {
{ this.renderPendingSeeds() } { this.renderPendingSeeds() }
{ this.renderSelectedSeeds() } { this.renderSelectedSeeds() }
</div> </div>
<div className="confirm-seed-phrase__shuffled-seed-words" data-testid="seed-phrase-shuffled"> <div className="confirm-seed-phrase__sorted-seed-words" data-testid="seed-phrase-sorted">
{ {
shuffledSeedWords.map((word, index) => { sortedSeedWords.map((word, index) => {
const isSelected = selectedSeedIndices.includes(index) const isSelected = selectedSeedIndices.includes(index)
return ( return (
@ -175,7 +174,7 @@ export default class ConfirmSeedPhrase extends PureComponent {
index={index} index={index}
setHoveringIndex={this.setHoveringIndex} setHoveringIndex={this.setHoveringIndex}
onDrop={this.onDrop} onDrop={this.onDrop}
className="confirm-seed-phrase__seed-word--shuffled" className="confirm-seed-phrase__seed-word--sorted"
selected={isSelected} selected={isSelected}
onClick={() => { onClick={() => {
if (!isSelected) { if (!isSelected) {
@ -203,10 +202,10 @@ export default class ConfirmSeedPhrase extends PureComponent {
} }
renderSelectedSeeds () { renderSelectedSeeds () {
const { shuffledSeedWords, selectedSeedIndices, draggingSeedIndex } = this.state const { sortedSeedWords, selectedSeedIndices, draggingSeedIndex } = this.state
return EMPTY_SEEDS.map((_, index) => { return EMPTY_SEEDS.map((_, index) => {
const seedIndex = selectedSeedIndices[index] const seedIndex = selectedSeedIndices[index]
const word = shuffledSeedWords[seedIndex] const word = sortedSeedWords[seedIndex]
return ( return (
<DraggableSeed <DraggableSeed
@ -228,7 +227,7 @@ export default class ConfirmSeedPhrase extends PureComponent {
renderPendingSeeds () { renderPendingSeeds () {
const { const {
pendingSeedIndices, pendingSeedIndices,
shuffledSeedWords, sortedSeedWords,
draggingSeedIndex, draggingSeedIndex,
hoveringIndex, hoveringIndex,
} = this.state } = this.state
@ -237,7 +236,7 @@ export default class ConfirmSeedPhrase extends PureComponent {
return EMPTY_SEEDS.map((_, index) => { return EMPTY_SEEDS.map((_, index) => {
const seedIndex = indices[index] const seedIndex = indices[index]
const word = shuffledSeedWords[seedIndex] const word = sortedSeedWords[seedIndex]
return ( return (
<DraggableSeed <DraggableSeed

4
ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
View File

@ -3,7 +3,7 @@
margin-bottom: 12px; margin-bottom: 12px;
} }
&__shuffled-seed-words { &__sorted-seed-words {
max-width: 575px; max-width: 575px;
} }
@ -20,7 +20,7 @@
border-radius: 4px; border-radius: 4px;
cursor: move; cursor: move;
&--shuffled { &--sorted {
cursor: pointer; cursor: pointer;
margin: 6px; margin: 6px;
} }

16
ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js
View File

@ -23,7 +23,7 @@ describe('ConfirmSeedPhrase Component', () => {
}) })
assert.equal( assert.equal(
root.find('.confirm-seed-phrase__seed-word--shuffled').length, root.find('.confirm-seed-phrase__seed-word--sorted').length,
12, 12,
'should render 12 seed phrases' '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 // Click on 3 seeds to add to selected
seeds.at(0).simulate('click') seeds.at(0).simulate('click')
@ -59,7 +59,7 @@ describe('ConfirmSeedPhrase Component', () => {
root.state() root.state()
root.update() root.update()
root.state() 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( assert.deepEqual(
root.state().selectedSeedIndices, root.state().selectedSeedIndices,
[0, 2], [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 // Click on 3 seeds to add to selected
seeds.at(0).simulate('click') 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 // Click on 3 seeds to add to selected
seeds.at(0).simulate('click') seeds.at(0).simulate('click')
@ -148,12 +148,12 @@ describe('ConfirmSeedPhrase Component', () => {
} }
) )
const shuffled = root.state().shuffledSeedWords const sorted = root.state().sortedSeedWords
const seeds = root.find('.confirm-seed-phrase__seed-word--shuffled') const seeds = root.find('.confirm-seed-phrase__seed-word--sorted')
originalSeed.forEach(seed => { originalSeed.forEach(seed => {
const seedIndex = shuffled.findIndex(s => s === seed) const seedIndex = sorted.findIndex(s => s === seed)
seeds.at(seedIndex).simulate('click') seeds.at(seedIndex).simulate('click')
}) })