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

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

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

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

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

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

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

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 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() }
</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)
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 (
<DraggableSeed
@ -228,7 +227,7 @@ export default class ConfirmSeedPhrase extends PureComponent {
renderPendingSeeds () {
const {
pendingSeedIndices,
shuffledSeedWords,
sortedSeedWords,
draggingSeedIndex,
hoveringIndex,
} = this.state
@ -237,7 +236,7 @@ export default class ConfirmSeedPhrase extends PureComponent {
return EMPTY_SEEDS.map((_, index) => {
const seedIndex = indices[index]
const word = shuffledSeedWords[seedIndex]
const word = sortedSeedWords[seedIndex]
return (
<DraggableSeed

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

@ -3,7 +3,7 @@
margin-bottom: 12px;
}
&__shuffled-seed-words {
&__sorted-seed-words {
max-width: 575px;
}
@ -20,7 +20,7 @@
border-radius: 4px;
cursor: move;
&--shuffled {
&--sorted {
cursor: pointer;
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(
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')
})