Implement add to bookmark page - Closes #2056

i18n/locales/en/common.json

@@ -29,6 +29,7 @@
   "Add a Lisk ID to follow": "Add a Lisk ID to follow",
   "Add a bookmark": "Add a bookmark",
   "Add address to bookmarks": "Add address to bookmarks",
+  "Add bookmark": "Add bookmark",
   "Add some {{activeToken}} to your Lisk Hub account now!": "Add some {{activeToken}} to your Lisk Hub account now!",
   "Add to bookmarks": "Add to bookmarks",
   "Add to list": "Add to list",
@@ -227,6 +228,8 @@
   "Incoming transactions": "Incoming transactions",
   "Info": "Info",
   "Initialize Lisk ID": "Initialize Lisk ID",
+  "Insert label": "Insert label",
+  "Insert public address": "Insert public address",
   "Insert public address or a name": "Insert public address or a name",
   "Insert the amount of transaction": "Insert the amount of transaction",
   "Install update": "Install update",
@@ -247,6 +250,8 @@
   "LSK": "LSK",
   "LSK forged": "LSK forged",
   "LSK received": "LSK received",
+  "Label": "Label",
+  "Label is too long.": "Label is too long.",
   "Last Forged Block": "Last Forged Block",
   "Later": "Later",
   "Learn about blockchain with our comprehensive knowledge base.": "Learn about blockchain with our comprehensive knowledge base.",
@@ -285,6 +290,7 @@
   "Max": "Max",
   "Max amount must be greater than Min amount": "Max amount must be greater than Min amount",
   "Max amount of delegates in one voting exceeded.": "Max amount of delegates in one voting exceeded.",
+  "Max. 20 characters": "Max. 20 characters",
   "Max. 20 characters, a-z, 0-1, no special characters except !@$_.": "Max. 20 characters, a-z, 0-1, no special characters except !@$_.",
   "Maximum floating point is 8.": "Maximum floating point is 8.",
   "Maximum length exceeded": "Maximum length exceeded",
@@ -298,6 +304,7 @@
   "My votes after confirmation": "My votes after confirmation",
   "Name is already taken!": "Name is already taken!",
   "Network switcher": "Network switcher",
+  "New bookmark": "New bookmark",
   "New to Lisk? ": "New to Lisk? ",
   "Next": "Next",
   "Nickname is too long.": "Nickname is too long.",

src/components/accountVisual/accountVisual.css

@@ -1,3 +1,5 @@
+@import '../app/variablesV2.css';
+
 .wrapper {
   display: inline-block;
   border-radius: 100%;
@@ -9,3 +11,9 @@
   overflow: hidden;
   display: inline-block;
 }
+
+.placeholder {
+  background-color: var(--color-platinum);
+  border-radius: 50%;
+  display: inline-block;
+}

src/components/accountVisual/index.js

@@ -181,7 +181,8 @@ class AccountVisual extends React.Component {
 
   shouldComponentUpdate(nextProps, state) {
     return this.state.isSBreakpoint !== state.isSBreakpoint
-      || nextProps.address !== this.props.address;
+      || nextProps.address !== this.props.address
+      || nextProps.placeholder !== this.props.placeholder;
   }
 
   resizeWindow() {
@@ -202,12 +203,21 @@ class AccountVisual extends React.Component {
 
   render() { // eslint-disable-line max-statements
     const {
-      address, size, sizeS, className,
+      address, size, sizeS, className, placeholder,
     } = this.props;
 
     const sizeL = size || 200;
     const newSize = this.state.isSBreakpoint && sizeS ? sizeS : sizeL;
 
+    if (placeholder) {
+      return (
+        <span
+          className={`${styles.placeholder} ${className}`}
+          style={{ height: newSize, width: newSize }}
+        />
+      );
+    }
+
     if (!reg.address.test(address)) {
       return <img
         src={svg.btcIcon}

src/components/app/variablesV2.css

@@ -73,6 +73,7 @@ or "warn/action" ineastd of "red/green"
   --header-logo-size: 56px;
   --search-box-width-l: 597px;
   --footer-button-width: 400px;
+  --medium-box-width: 720px;
 
   /*************************
         Padding

src/components/bookmarks/addBookmark/addBookmark.css

@@ -0,0 +1,86 @@
+@import '../../app/variablesV2.css';
+@import '../../app/mixins.css';
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  & .content {
+    width: var(--medium-box-width);
+
+    & header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    & h1 {
+      @mixin headingLarge;
+    }
+  }
+}
+
+.formHolder {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+
+  & > .buttonHolder {
+    display: flex;
+    margin: 0 auto 30px;
+    width: var(--footer-button-width);
+
+    & button {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  & .fieldGroup {
+    display: block;
+    position: relative;
+
+    & .avatar {
+      left: 16px;
+      position: absolute;
+      top: 12px;
+    }
+  }
+
+  & label {
+    display: block;
+    margin-bottom: 12px;
+
+    & > .label {
+      @mixin contentNormal bold;
+
+      color: var(--color-maastricht-blue);
+      display: block;
+      margin-bottom: 12px;
+    }
+
+    & .input[name="address"] {
+      padding-left: 48px;
+    }
+
+    & .input:focus ~ .feedback {
+      opacity: 1 !important;
+    }
+  }
+
+  & .feedback {
+    margin-top: 5px;
+    min-height: 40px;
+    opacity: 0;
+
+    &.error {
+      opacity: 1;
+    }
+
+    &:not(.error) {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}