Allow dragging seed phrase during Confirm Seed Phrase (#6557)

* Add basic drag and drop functionality

* Refactor seed phrase data structure

* Insert to list when drop

* Save before refactor

* Finish DND

* Fix linter

* update package-lock.json

* Address styling feedbacks

* Add box shadow on hover

* Finish adding unit tests

* Remove describe.only

6 files changed, 565 insertions, 127 deletions

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 f3bfc3171..04fe651e6 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
@@ -8,7 +8,9 @@ import {
   INITIALIZE_SEED_PHRASE_ROUTE,
 } from '../../../../helpers/constants/routes'
 import { exportAsFile } from '../../../../helpers/utils/util'
-import { selectSeedWord, deselectSeedWord } from './confirm-seed-phrase.state'
+import DraggableSeed from './draggable-seed.component'
+
+const EMPTY_SEEDS = Array(12).fill(null)
 
 export default class ConfirmSeedPhrase extends PureComponent {
   static contextTypes = {
@@ -27,10 +29,32 @@ export default class ConfirmSeedPhrase extends PureComponent {
   }
 
   state = {
-    selectedSeedWords: [],
+    selectedSeedIndices: [],
     shuffledSeedWords: [],
-    // Hash of shuffledSeedWords index {Number} to selectedSeedWords index {Number}
-    selectedSeedWordsHash: {},
+    pendingSeedIndices: [],
+    draggingSeedIndex: -1,
+    hoveringIndex: -1,
+    isDragging: false,
+  }
+
+  shouldComponentUpdate (nextProps, nextState, nextContext) {
+    const { seedPhrase } = this.props
+    const {
+      selectedSeedIndices,
+      shuffledSeedWords,
+      pendingSeedIndices,
+      draggingSeedIndex,
+      hoveringIndex,
+      isDragging,
+    } = this.state
+
+    return seedPhrase !== nextProps.seedPhrase ||
+      draggingSeedIndex !== nextState.draggingSeedIndex ||
+      isDragging !== nextState.isDragging ||
+      hoveringIndex !== nextState.hoveringIndex ||
+      selectedSeedIndices.join(' ') !== nextState.selectedSeedIndices.join(' ') ||
+      shuffledSeedWords.join(' ') !== nextState.shuffledSeedWords.join(' ') ||
+      pendingSeedIndices.join(' ') !== nextState.pendingSeedIndices.join(' ')
   }
 
   componentDidMount () {
@@ -39,6 +63,26 @@ export default class ConfirmSeedPhrase extends PureComponent {
     this.setState({ shuffledSeedWords })
   }
 
+  setDraggingSeedIndex = draggingSeedIndex => this.setState({ draggingSeedIndex })
+
+  setHoveringIndex = hoveringIndex => this.setState({ hoveringIndex })
+
+  onDrop = targetIndex => {
+    const {
+      selectedSeedIndices,
+      draggingSeedIndex,
+    } = this.state
+
+    const indices = insert(selectedSeedIndices, draggingSeedIndex, targetIndex, true)
+
+    this.setState({
+      selectedSeedIndices: indices,
+      pendingSeedIndices: indices,
+      draggingSeedIndex: -1,
+      hoveringIndex: -1,
+    })
+  }
+
   handleExport = () => {
     exportAsFile('MetaMask Secret Backup Phrase', this.props.seedPhrase, 'text/plain')
   }
@@ -65,23 +109,34 @@ export default class ConfirmSeedPhrase extends PureComponent {
   }
 
   handleSelectSeedWord = (word, shuffledIndex) => {
-    this.setState(selectSeedWord(word, shuffledIndex))
+    this.setState({
+      selectedSeedIndices: [...this.state.selectedSeedIndices, shuffledIndex],
+      pendingSeedIndices: [...this.state.pendingSeedIndices, shuffledIndex],
+    })
   }
 
   handleDeselectSeedWord = shuffledIndex => {
-    this.setState(deselectSeedWord(shuffledIndex))
+    this.setState({
+      selectedSeedIndices: this.state.selectedSeedIndices.filter(i => shuffledIndex !== i),
+      pendingSeedIndices: this.state.pendingSeedIndices.filter(i => shuffledIndex !== i),
+    })
   }
 
   isValid () {
     const { seedPhrase } = this.props
-    const { selectedSeedWords } = this.state
+    const { selectedSeedIndices, shuffledSeedWords } = this.state
+    const selectedSeedWords = selectedSeedIndices.map(i => shuffledSeedWords[i])
     return seedPhrase === selectedSeedWords.join(' ')
   }
 
   render () {
     const { t } = this.context
     const { history } = this.props
-    const { selectedSeedWords, shuffledSeedWords, selectedSeedWordsHash } = this.state
+    const {
+      selectedSeedIndices,
+      shuffledSeedWords,
+      draggingSeedIndex,
+    } = this.state
 
     return (
       <div className="confirm-seed-phrase">
@@ -102,31 +157,30 @@ export default class ConfirmSeedPhrase extends PureComponent {
         <div className="first-time-flow__text-block">
           { t('selectEachPhrase') }
         </div>
-        <div className="confirm-seed-phrase__selected-seed-words">
-          {
-            selectedSeedWords.map((word, index) => (
-              <div
-                key={index}
-                className="confirm-seed-phrase__seed-word"
-              >
-                { word }
-              </div>
-            ))
-          }
+        <div
+          className={classnames('confirm-seed-phrase__selected-seed-words', {
+            'confirm-seed-phrase__selected-seed-words--dragging': draggingSeedIndex > -1,
+          })}
+        >
+          { this.renderPendingSeeds() }
+          { this.renderSelectedSeeds() }
         </div>
         <div className="confirm-seed-phrase__shuffled-seed-words">
           {
             shuffledSeedWords.map((word, index) => {
-              const isSelected = index in selectedSeedWordsHash
+              const isSelected = selectedSeedIndices.includes(index)
 
               return (
-                <div
+                <DraggableSeed
                   key={index}
-                  className={classnames(
-                    'confirm-seed-phrase__seed-word',
-                    'confirm-seed-phrase__seed-word--shuffled',
-                    { 'confirm-seed-phrase__seed-word--selected': isSelected }
-                  )}
+                  seedIndex={index}
+                  index={index}
+                  draggingSeedIndex={this.state.draggingSeedIndex}
+                  setDraggingSeedIndex={this.setDraggingSeedIndex}
+                  setHoveringIndex={this.setHoveringIndex}
+                  onDrop={this.onDrop}
+                  className="confirm-seed-phrase__seed-word--shuffled"
+                  selected={isSelected}
                   onClick={() => {
                     if (!isSelected) {
                       this.handleSelectSeedWord(word, index)
@@ -134,9 +188,8 @@ export default class ConfirmSeedPhrase extends PureComponent {
                       this.handleDeselectSeedWord(index)
                     }
                   }}
-                >
-                  { word }
-                </div>
+                  word={word}
+                />
               )
             })
           }
@@ -152,4 +205,80 @@ export default class ConfirmSeedPhrase extends PureComponent {
       </div>
     )
   }
+
+  renderSelectedSeeds () {
+    const { shuffledSeedWords, selectedSeedIndices, draggingSeedIndex } = this.state
+    return EMPTY_SEEDS.map((_, index) => {
+      const seedIndex = selectedSeedIndices[index]
+      const word = shuffledSeedWords[seedIndex]
+
+      return (
+        <DraggableSeed
+          key={`selected-${seedIndex}-${index}`}
+          className="confirm-seed-phrase__selected-seed-words__selected-seed"
+          index={index}
+          seedIndex={seedIndex}
+          word={word}
+          draggingSeedIndex={draggingSeedIndex}
+          setDraggingSeedIndex={this.setDraggingSeedIndex}
+          setHoveringIndex={this.setHoveringIndex}
+          onDrop={this.onDrop}
+          draggable
+        />
+      )
+    })
+  }
+
+  renderPendingSeeds () {
+    const {
+      pendingSeedIndices,
+      shuffledSeedWords,
+      draggingSeedIndex,
+      hoveringIndex,
+    } = this.state
+
+    const indices = insert(pendingSeedIndices, draggingSeedIndex, hoveringIndex)
+
+    return EMPTY_SEEDS.map((_, index) => {
+      const seedIndex = indices[index]
+      const word = shuffledSeedWords[seedIndex]
+
+      return (
+        <DraggableSeed
+          key={`pending-${seedIndex}-${index}`}
+          index={index}
+          className={classnames('confirm-seed-phrase__selected-seed-words__pending-seed', {
+            'confirm-seed-phrase__seed-word--hidden': draggingSeedIndex === seedIndex && index !== hoveringIndex,
+          })}
+          seedIndex={seedIndex}
+          word={word}
+          draggingSeedIndex={draggingSeedIndex}
+          setDraggingSeedIndex={this.setDraggingSeedIndex}
+          setHoveringIndex={this.setHoveringIndex}
+          onDrop={this.onDrop}
+          droppable={!!word}
+        />
+      )
+    })
+  }
+}
+
+function insert (list, value, target, removeOld) {
+  let nextList = [...list]
+
+  if (typeof list[target] === 'number') {
+    nextList = [...list.slice(0, target), value, ...list.slice(target)]
+  }
+
+  if (removeOld) {
+    nextList = nextList.filter((seed, i) => {
+      return seed !== value || i === target
+    })
+  }
+
+  if (nextList.length > 12) {
+    nextList.pop()
+  }
+
+  return nextList
 }
diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.state.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.state.js
deleted file mode 100644
index f2476fc5c..000000000
--- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.state.js
+++ /dev/null
@@ -1,41 +0,0 @@
-export function selectSeedWord (word, shuffledIndex) {
-  return function update (state) {
-    const { selectedSeedWords, selectedSeedWordsHash } = state
-    const nextSelectedIndex = selectedSeedWords.length
-
-    return {
-      selectedSeedWords: [ ...selectedSeedWords, word ],
-      selectedSeedWordsHash: { ...selectedSeedWordsHash, [shuffledIndex]: nextSelectedIndex },
-    }
-  }
-}
-
-export function deselectSeedWord (shuffledIndex) {
-  return function update (state) {
-    const {
-      selectedSeedWords: prevSelectedSeedWords,
-      selectedSeedWordsHash: prevSelectedSeedWordsHash,
-    } = state
-
-    const selectedSeedWords = [...prevSelectedSeedWords]
-    const indexToRemove = prevSelectedSeedWordsHash[shuffledIndex]
-    selectedSeedWords.splice(indexToRemove, 1)
-    const selectedSeedWordsHash = Object.keys(prevSelectedSeedWordsHash).reduce((acc, index) => {
-      const output = { ...acc }
-      const selectedSeedWordIndex = prevSelectedSeedWordsHash[index]
-
-      if (selectedSeedWordIndex < indexToRemove) {
-        output[index] = selectedSeedWordIndex
-      } else if (selectedSeedWordIndex > indexToRemove) {
-        output[index] = selectedSeedWordIndex - 1
-      }
-
-      return output
-    }, {})
-
-    return {
-      selectedSeedWords,
-      selectedSeedWordsHash,
-    }
-  }
-}
diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js
new file mode 100644
index 000000000..97dbd2a4b
--- /dev/null
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js
@@ -0,0 +1,126 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { DragSource, DropTarget } from 'react-dnd'
+
+class DraggableSeed extends Component {
+
+  static propTypes = {
+    // React DnD Props
+    connectDragSource: PropTypes.func.isRequired,
+    connectDropTarget: PropTypes.func.isRequired,
+    isDragging: PropTypes.bool,
+    isOver: PropTypes.bool,
+    canDrop: PropTypes.bool,
+    // Own Props
+    onClick: PropTypes.func.isRequired,
+    setHoveringIndex: PropTypes.func.isRequired,
+    index: PropTypes.number,
+    draggingSeedIndex: PropTypes.number,
+    word: PropTypes.string,
+    className: PropTypes.string,
+    selected: PropTypes.bool,
+    droppable: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    className: '',
+    onClick () {},
+  }
+
+  componentWillReceiveProps (nextProps, nextContext) {
+    const { isOver, setHoveringIndex } = this.props
+    if (isOver && !nextProps.isOver) {
+      setHoveringIndex(-1)
+    }
+  }
+
+  render () {
+    const {
+      connectDragSource,
+      connectDropTarget,
+      isDragging,
+      index,
+      word,
+      selected,
+      className,
+      onClick,
+      isOver,
+      canDrop,
+    } = this.props
+
+    return connectDropTarget(connectDragSource(
+      <div
+        key={index}
+        className={classnames('btn-secondary confirm-seed-phrase__seed-word', className, {
+          'confirm-seed-phrase__seed-word--selected btn-primary': selected,
+          'confirm-seed-phrase__seed-word--dragging': isDragging,
+          'confirm-seed-phrase__seed-word--empty': !word,
+          'confirm-seed-phrase__seed-word--active-drop': !isOver && canDrop,
+          'confirm-seed-phrase__seed-word--drop-hover': isOver && canDrop,
+        })}
+        onClick={onClick}
+      >
+        { word }
+      </div>
+    ))
+  }
+}
+
+const SEEDWORD = 'SEEDWORD'
+
+const seedSource = {
+  beginDrag (props) {
+    setTimeout(() => props.setDraggingSeedIndex(props.seedIndex), 0)
+    return {
+      seedIndex: props.seedIndex,
+      word: props.word,
+    }
+  },
+  canDrag (props) {
+    return props.draggable
+  },
+  endDrag (props, monitor) {
+    const dropTarget = monitor.getDropResult()
+
+    if (!dropTarget) {
+      setTimeout(() => props.setDraggingSeedIndex(-1), 0)
+      return
+    }
+
+    props.onDrop(dropTarget.targetIndex)
+  },
+}
+
+const seedTarget = {
+  drop (props) {
+    return {
+      targetIndex: props.index,
+    }
+  },
+  canDrop (props) {
+    return props.droppable
+  },
+  hover (props) {
+    props.setHoveringIndex(props.index)
+  },
+}
+
+const collectDrag = (connect, monitor) => {
+  return {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging(),
+  }
+}
+
+const collectDrop = (connect, monitor) => {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver(),
+    canDrop: monitor.canDrop(),
+  }
+}
+
+export default DropTarget(SEEDWORD, seedTarget, collectDrop)(DragSource(SEEDWORD, seedSource, collectDrag)(DraggableSeed))
+
+
diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
index 93137618c..f025a503f 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
@@ -3,37 +3,58 @@
     margin-bottom: 12px;
   }
 
-  &__selected-seed-words {
-    min-height: 190px;
-    max-width: 496px;
-    border: 1px solid #CDCDCD;
-    border-radius: 6px;
-    background-color: $white;
-    margin: 24px 0 36px;
-    padding: 12px;
-  }
-
   &__shuffled-seed-words {
-    max-width: 496px;
+    max-width: 575px;
   }
 
   &__seed-word {
-    display: inline-block;
-    color: #5B5D67;
-    background-color: #E7E7E7;
+    display: inline-flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
     padding: 8px 18px;
-    min-width: 64px;
+    width: 128px;
+    height: 41px;
     margin: 4px;
     text-align: center;
+    border-radius: 4px;
+    cursor: move;
+
+    &--shuffled {
+      cursor: pointer;
+      margin: 6px;
+    }
 
     &--selected {
-      background-color: #85D1CC;
       color: $white;
     }
 
-    &--shuffled {
-      cursor: pointer;
-      margin: 6px;
+    &--dragging {
+      margin: 0;
+    }
+
+    &--empty {
+      background-color: transparent;
+      border-color: transparent;
+      cursor: default;
+
+      &:hover,
+      &:active {
+        background-color: transparent;
+        border-color: transparent;
+        cursor: default;
+        box-shadow: none !important;
+      }
+    }
+
+    &--hidden {
+      display: none !important;
+    }
+
+    &--drop-hover {
+      background-color: transparent;
+      border-color: transparent;
+      color: transparent;
     }
 
     @media screen and (max-width: 575px) {
@@ -42,7 +63,37 @@
     }
   }
 
-  button {
-    margin-top: 0xp;
+  &__selected-seed-words {
+    display: flex;
+    flex-flow: row wrap;
+    min-height: 161px;
+    max-width: 575px;
+    border: 1px solid #CDCDCD;
+    border-radius: 6px;
+    background-color: $white;
+    margin: 24px 0 36px;
+    padding: 12px;
+
+    &__pending-seed {
+      display: none;
+    }
+
+    &__selected-seed {
+      display: inline-flex;
+
+      &:hover {
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+      }
+    }
+
+    &--dragging {
+      .confirm-seed-phrase__selected-seed-words__pending-seed {
+        display: inline-flex;
+      }
+
+      .confirm-seed-phrase__selected-seed-words__selected-seed {
+        display: none;
+      }
+    }
   }
 }
diff --git a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
index 9a9f84049..0b19af18c 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
@@ -8,6 +8,8 @@ import {
   INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE,
   DEFAULT_ROUTE,
 } from '../../../helpers/constants/routes'
+import HTML5Backend from 'react-dnd-html5-backend'
+import {DragDropContextProvider} from 'react-dnd'
 
 export default class SeedPhrase extends PureComponent {
   static propTypes = {
@@ -28,43 +30,45 @@ export default class SeedPhrase extends PureComponent {
     const { seedPhrase } = this.props
 
     return (
-      <div className="first-time-flow__wrapper">
-        <div className="app-header__logo-container">
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-            src="/images/logo/metamask-logo-horizontal.svg"
-            height={30}
-          />
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--icon"
-            src="/images/logo/metamask-fox.svg"
-            height={42}
-            width={42}
-          />
+      <DragDropContextProvider backend={HTML5Backend}>
+        <div className="first-time-flow__wrapper">
+          <div className="app-header__logo-container">
+            <img
+              className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+              src="/images/logo/metamask-logo-horizontal.svg"
+              height={30}
+            />
+            <img
+              className="app-header__metafox-logo app-header__metafox-logo--icon"
+              src="/images/logo/metamask-fox.svg"
+              height={42}
+              width={42}
+            />
+          </div>
+          <Switch>
+            <Route
+              exact
+              path={INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE}
+              render={props => (
+                <ConfirmSeedPhrase
+                  { ...props }
+                  seedPhrase={seedPhrase}
+                />
+              )}
+            />
+            <Route
+              exact
+              path={INITIALIZE_SEED_PHRASE_ROUTE}
+              render={props => (
+                <RevealSeedPhrase
+                  { ...props }
+                  seedPhrase={seedPhrase}
+                />
+              )}
+            />
+          </Switch>
         </div>
-        <Switch>
-          <Route
-            exact
-            path={INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE}
-            render={props => (
-              <ConfirmSeedPhrase
-                { ...props }
-                seedPhrase={seedPhrase}
-              />
-            )}
-          />
-          <Route
-            exact
-            path={INITIALIZE_SEED_PHRASE_ROUTE}
-            render={props => (
-              <RevealSeedPhrase
-                { ...props }
-                seedPhrase={seedPhrase}
-              />
-            )}
-          />
-        </Switch>
-      </div>
+      </DragDropContextProvider>
     )
   }
 }
diff --git a/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js b/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js
new file mode 100644
index 000000000..8339a6f6f
--- /dev/null
+++ b/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js
@@ -0,0 +1,169 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import ConfirmSeedPhrase from '../confirm-seed-phrase/confirm-seed-phrase.component'
+
+function shallowRender (props = {}, context = {}) {
+  return shallow(
+    <ConfirmSeedPhrase {...props} />,
+    {
+      context: {
+        t: str => str + '_t',
+        ...context,
+      },
+    }
+  )
+}
+
+describe('ConfirmSeedPhrase Component', () => {
+  it('should render correctly', () => {
+    const root = shallowRender({
+      seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬',
+    })
+
+    assert.equal(
+      root.find('.confirm-seed-phrase__seed-word--shuffled').length,
+      12,
+      'should render 12 seed phrases'
+    )
+  })
+
+  it('should add/remove selected on click', () => {
+    const metricsEventSpy = sinon.spy()
+    const pushSpy = sinon.spy()
+    const root = shallowRender(
+      {
+        seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬',
+        history: { push: pushSpy },
+      },
+      {
+        metricsEvent: metricsEventSpy,
+      }
+    )
+
+    const seeds = root.find('.confirm-seed-phrase__seed-word--shuffled')
+
+    // Click on 3 seeds to add to selected
+    seeds.at(0).simulate('click')
+    seeds.at(1).simulate('click')
+    seeds.at(2).simulate('click')
+
+    assert.deepEqual(
+      root.state().selectedSeedIndices,
+      [0, 1, 2],
+      'should add seed phrase to selected on click',
+    )
+
+    // Click on a selected seed to remove
+    root.state()
+    root.update()
+    root.state()
+    root.find('.confirm-seed-phrase__seed-word--shuffled').at(1).simulate('click')
+    assert.deepEqual(
+      root.state().selectedSeedIndices,
+      [0, 2],
+      'should remove seed phrase from selected when click again',
+    )
+  })
+
+  it('should render correctly on hover', () => {
+    const metricsEventSpy = sinon.spy()
+    const pushSpy = sinon.spy()
+    const root = shallowRender(
+      {
+        seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬',
+        history: { push: pushSpy },
+      },
+      {
+        metricsEvent: metricsEventSpy,
+      }
+    )
+
+    const seeds = root.find('.confirm-seed-phrase__seed-word--shuffled')
+
+    // Click on 3 seeds to add to selected
+    seeds.at(0).simulate('click')
+    seeds.at(1).simulate('click')
+    seeds.at(2).simulate('click')
+
+    // Dragging Seed # 2 to 0 placeth
+    root.instance().setDraggingSeedIndex(2)
+    root.instance().setHoveringIndex(0)
+
+    root.update()
+
+    const pendingSeeds = root.find('.confirm-seed-phrase__selected-seed-words__pending-seed')
+
+    assert.equal(pendingSeeds.at(0).props().seedIndex, 2)
+    assert.equal(pendingSeeds.at(1).props().seedIndex, 0)
+    assert.equal(pendingSeeds.at(2).props().seedIndex, 1)
+  })
+
+  it('should insert seed in place on drop', () => {
+    const metricsEventSpy = sinon.spy()
+    const pushSpy = sinon.spy()
+    const root = shallowRender(
+      {
+        seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬',
+        history: { push: pushSpy },
+      },
+      {
+        metricsEvent: metricsEventSpy,
+      }
+    )
+
+    const seeds = root.find('.confirm-seed-phrase__seed-word--shuffled')
+
+    // Click on 3 seeds to add to selected
+    seeds.at(0).simulate('click')
+    seeds.at(1).simulate('click')
+    seeds.at(2).simulate('click')
+
+    // Drop Seed # 2 to 0 placeth
+    root.instance().setDraggingSeedIndex(2)
+    root.instance().setHoveringIndex(0)
+    root.instance().onDrop(0)
+
+    root.update()
+
+    assert.deepEqual(root.state().selectedSeedIndices, [2, 0, 1])
+    assert.deepEqual(root.state().pendingSeedIndices, [2, 0, 1])
+  })
+
+  it('should submit correctly', () => {
+    const originalSeed = ['鼠', '牛', '虎', '兔', '龍', '蛇', '馬', '羊', '猴', '雞', '狗', '豬']
+    const metricsEventSpy = sinon.spy()
+    const pushSpy = sinon.spy()
+    const root = shallowRender(
+      {
+        seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬',
+        history: { push: pushSpy },
+      },
+      {
+        metricsEvent: metricsEventSpy,
+      }
+    )
+
+    const shuffled = root.state().shuffledSeedWords
+    const seeds = root.find('.confirm-seed-phrase__seed-word--shuffled')
+
+
+    originalSeed.forEach(seed => {
+      const seedIndex = shuffled.findIndex(s => s === seed)
+      seeds.at(seedIndex).simulate('click')
+    })
+
+    root.update()
+
+    root.find('.first-time-flow__button').simulate('click')
+    assert.deepEqual(metricsEventSpy.args[0][0], {
+      eventOpts: {
+        category: 'Onboarding',
+        action: 'Seed Phrase Setup',
+        name: 'Verify Complete',
+      },
+    })
+    assert.equal(pushSpy.args[0][0], '/initialize/end-of-flow')
+  })
+})