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

1 files changed, 40 insertions, 36 deletions

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