Merge pull request #706 from LiskHQ/703-create-account-shapes

Animate shape colors in registration - Closes #703

config/webpack.config.react.js

@@ -104,7 +104,7 @@ module.exports = {
         extends: 'stylelint-config-standard',
         rules: {
           'selector-pseudo-class-no-unknown': null,
-          'unit-whitelist': ['px', 'deg', '%', 'ms'],
+          'unit-whitelist': ['px', 'deg', '%', 'ms', 's'],
           'length-zero-no-unit': null,
           'at-rule-no-unknown': null,
         },

src/components/passphrase/create/colorSchemes.js

@@ -0,0 +1,27 @@
+export default [
+  {
+    foreground: [
+      ['#FFD300', '#FF9100'],
+      ['#FFD300', '#FF9100'],
+      ['#C86DD7', '#3023AE'],
+      ['#C86DD7', '#3023AE'],
+      ['#93F4FE', '#004AFF'],
+      ['#93F4FE', '#004AFF'],
+      ['#008BFF', '#00B685'],
+      ['#008BFF', '#00B685'],
+      ['#113034', '#00B685'],
+      ['#113034', '#00B685'],
+    ],
+    background: [
+      ['#F792A6', '#EC596D'],
+      ['#F792A6', '#EC596D'],
+      ['#F792A6', '#EC596D'],
+      ['#acafff', '#4D3AFF'],
+      ['#acafff', '#4D3AFF'],
+      ['#93F4FE', '#008BFF'],
+      ['#93F4FE', '#008BFF'],
+      ['#5DECBF', '#96F7E1'],
+      ['#5DECBF', '#96F7E1'],
+    ],
+  },
+];

src/components/passphrase/create/index.js

@@ -5,7 +5,6 @@ import { extractAddress } from '../../../utils/api/account';
 import AccountVisual from '../../accountVisual';
 import styles from './create.css';
 import { FontIcon } from '../../fontIcon';
-import * as shapesSrc from '../../../assets/images/register-shapes/*.svg'; //eslint-disable-line
 import Shapes from './shapes';
 import { PrimaryButton, Button } from '../../toolbox/buttons/button';
 import TransitionWrapper from '../../toolbox/transitionWrapper';
@@ -21,7 +20,6 @@ class Create extends React.Component {
         x: 0,
         y: 0,
       },
-      shapes: [1, 1, 1, 1, 1, 1, 1, 1, 1],
       headingClass: '',
     };
     this.isTouchDevice = false;
@@ -41,22 +39,6 @@ class Create extends React.Component {
     }
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  hideShapeRandomly(list) {
-    const result = [];
-    const min = 0;
-    const max = 9;
-    let randomNumber;
-    while (result.length < 4) {
-      randomNumber = Math.floor((Math.random() * (max - min)) + min);
-      if (result.indexOf(randomNumber) === -1) {
-        result.push(randomNumber);
-      }
-    }
-    result.forEach((item) => { list[item] = 0; });
-    return list;
-  }
-
   componentWillUnmount() {
     const eventName = this.isTouchDevice ? 'devicemotion' : 'mousemove';
     document.removeEventListener(eventName, this.seedGeneratorBoundToThis, true);
@@ -136,12 +118,6 @@ class Create extends React.Component {
         step: 'info',
         address,
       });
-
-      const shapes = this.hideShapeRandomly(this.state.shapes);
-      // update state
-      this.setState({
-        shapes,
-      });
     }
   }
 
@@ -164,10 +140,7 @@ class Create extends React.Component {
         id='generatorContainer' ref={(el) => { this.container = el; }} onMouseMove={this.eventNormalizer} >
         <div className={grid['col-xs-12']}
           ref={ (pageRoot) => { this.pageRoot = pageRoot; } }>
-          {!this.state.address ?
-            <Shapes percentage={percentage} shapes={this.state.shapes} /> :
-            null
-          }
+          <Shapes percentage={percentage} addressCreated={this.state.address}/>
           <header>
             <TransitionWrapper current={this.state.step} step='generate'>
               <h2 className={`${styles.generatorHeader}`}