Merge pull request #114 from Neos1/fixes

bunch of fixes
Neos1 · Aug 19, 2019 · 3bf7dcf · 3bf7dcf
2 parents 218c414 + bdbfc43
commit 3bf7dcf
Show file tree

Hide file tree

Showing 53 changed files with 1,999 additions and 436 deletions.
diff --git a/dist/linux.zip b/dist/linux.zip
diff --git a/src/components/ballot/Container/Container.scss b/src/components/ballot/Container/Container.scss
@@ -1,7 +1,7 @@
 @import '../../../styles/ballot/_mixins.scss';
 
 .container {
-    min-width: 100%;
+    min-width: 100% !important;
     padding: 0;
     margin: 0 auto;
 }
diff --git a/src/components/ballot/Header/index.js b/src/components/ballot/Header/index.js
@@ -5,18 +5,21 @@ import votings from '../../../img/votes_icon.svg';
 import questions from '../../../img/questions_icon.svg';
 import users from '../../../img/users_icon.svg';
 import settings from '../../../img/settings_icon.svg';
+import logo from '../../../img/logo.svg';
 
 import { NavLink } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
-@inject('accountStore')@observer
+@inject('accountStore', 'contractModel') @observer
 class Header extends Component {
   constructor(props) {
     super(props);
-    this.state = { 
+    this.state = {
       addressHover: false,
-      address:'',
+      address: '',
       prettyAddress: '',
-     }
+      addressCopied: false,
+      userBalances: [],
+    }
   }
   componentWillMount() {
     this.prettyAddress();
@@ -25,11 +28,10 @@ class Header extends Component {
   prettyAddress() {
     const { accountStore } = this.props;
     const { address } = accountStore;
-
-    let arrayOfParts = [...new Set(address.replace('0x', '').split(new RegExp(/(\w{8})/g)))].filter(function(e){return e})
+    let arrayOfParts = [...new Set(address.replace('0x', '').split(new RegExp(/(\w{8})/g)))].filter(function (e) { return e })
     let length = arrayOfParts.length
-    let prettyAddress = `0x${arrayOfParts[0]}...${arrayOfParts[length-1]}`
-    this.setState ({
+    let prettyAddress = `0x${arrayOfParts[0]}...${arrayOfParts[length - 1]}`
+    this.setState({
       address: address,
       prettyAddress: prettyAddress,
     })
@@ -39,63 +41,108 @@ class Header extends Component {
     this.setState({
       addressHover: !this.state.addressHover
     })
+    this.getUserBalances();
   }
 
   copyAddress() {
+    this.setState({ addressCopied: true });
     navigator.clipboard.writeText(`0x${this.state.address}`)
+    setTimeout(() => {
+      this.setState({ addressCopied: false });
+    }, 3000)
+  }
+
+  getUserBalances() {
+    const { contractModel, accountStore } = this.props;
+    const { address } = web3.eth.accounts.wallet[0];
+    const { balances, userGroups } = contractModel;
+    const groups = Object.keys(balances)
+
+    const userBalances = userGroups.map(group => [group.name, balances[group.groupAddress].balances[address]])
+
+    this.setState({ userBalances })
   }
 
-  render() { 
-    return ( 
+  render() {
+    const { userBalances } = this.state
+    const balances = userBalances.map(balance => {
+      return <tr> <td><strong style={{ color: '#3AD29F' }}>{balance[0]}</strong></td> <td> <strong>{balance[1]}</strong> TKN</td></tr>
+    })
+    return (
       <header className={styles.header}>
         <nav className={styles.nav}>
-          <ul className={styles['nav-list']}>
-            <li>
-              <img src={votings} className={styles.icon}/>
-              <NavLink 
-                className={styles.link}
-                to="/votings"
-              > Голосования 
-              </NavLink>
-            </li>
-            <li>
-              <img src={questions} className={styles.icon}/>
-              <NavLink 
-                className={styles.link}  
-                to="/questions"
-              > Вопросы </NavLink>
-            </li>
-            <li>
-              <img src={users} className={styles.icon}/>
-              <NavLink 
-                className={styles.link } 
-                to="/users"
-              > Пользователи </NavLink>
-            </li>
-            <li>
-              <img src={settings} className={styles.icon}/>
-              <NavLink  
-                className={styles.link} 
-                to="/settings"
-              > Настройки</NavLink>
-            </li>
-          </ul>
-          <div 
-            className={styles['nav-profile']} 
-            onMouseOver={this.toggleAddress.bind(this)} 
+          <div style={{ 'display': 'flex' }}>
+            <div className={styles.logo}>
+              <img src={logo} height='40px' />
+            </div>
+            <ul className={styles['nav-list']}>
+              <li>
+                <img src={votings} className={styles.icon} />
+                <NavLink
+                  className={styles.link}
+                  to="/votings"
+                > Голосования
+                </NavLink>
+              </li>
+              <li>
+                <img src={questions} className={styles.icon} />
+                <NavLink
+                  className={styles.link}
+                  to="/questions"
+                > Вопросы </NavLink>
+              </li>
+              <li>
+                <img src={users} className={styles.icon} />
+                <NavLink
+                  className={styles.link}
+                  to="/users"
+                > Пользователи </NavLink>
+              </li>
+              <li>
+                <img src={settings} className={styles.icon} />
+                <NavLink
+                  className={styles.link}
+                  to="/settings"
+                > Настройки</NavLink>
+              </li>
+            </ul>
+          </div>
+          <div
+            className={styles['nav-profile']}
+            onMouseOver={this.toggleAddress.bind(this)}
             onMouseOut={this.toggleAddress.bind(this)}
-            > 
-              <img src={avatar}/>
-              <span className={styles['nav-profile__address']} onClick={this.copyAddress.bind(this)}> 
-                {
-                  this.state.addressHover ? `0x${this.state.address}` : this.state.prettyAddress
-                } 
-              </span>
+          >
+            <img src={avatar} />
+            <span className={styles['nav-profile__address']}
+              onClick={this.copyAddress.bind(this)}
+            >
+              {
+                this.state.addressHover ? `0x${this.state.address}` : this.state.prettyAddress
+              }
+            </span>
+            <div className={`${styles['nav-profile__hint']} ${this.state.addressHover ? '' : 'hidden'}`}>
+              {
+                this.state.addressCopied ? "Адрес успешно скопирован" : "Кликните на адрес, чтобы скопировать его"
+              }
+              <hr />
+              <table className={styles['nav-profile__balances']}>
+                <thead>
+                  <tr>
+                    <td>Группа</td>
+                    <td>Баланс</td>
+                  </tr>
+                </thead>
+                <tbody>
+                  {balances}
+                </tbody>
+              </table>
+            </div>
+
           </div>
         </nav>
       </header>
-     );
+    );
   }
 }
- 
+
 export default Header;
diff --git a/src/components/ballot/Header/style.scss b/src/components/ballot/Header/style.scss
@@ -7,11 +7,14 @@
   background-color:#457ACC;
   z-index: 999;
   .nav {
+    width: 100%;
+    margin: 0 auto;
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
     align-items: center;
     &-list {
+      flex-grow: 2;
       display: inline-block;
       padding: 0;
       margin: 0;
@@ -53,6 +56,7 @@
       }
     }
     &-profile {
+      position: relative;
       display: table-cell;
       background-color: #3468B8; 
       float: right;
@@ -74,9 +78,45 @@
         font-size: 12px;
         transition: .3s ease-in-out;
       }
+      &__hint {
+        width: 335px;
+        position: fixed;
+        padding: 10px;
+        background: #fff;
+        color: rgba($color: #37474F, $alpha: .5);
+        top: 40px;
+        right: 40px;
+        border: 1px solid #D9DFE3;
+        box-sizing: border-box;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
+        border-radius: 2px;
+        text-align: center;
+      }
+      &__balances {
+        margin: 10px auto;
+        td {
+          width: 50%;
+        }
+        thead {
+          line-height: 30px;
+          td {
+           color: #37474F;
+          }
+        }
+        tbody {
+          td {
+            color: #5B778D;
+          }
+        }
+      }
     }
   } 
 }
+.logo {
+  display: inline-block;
+  align-self: center;
+  margin: 0 40px 0 60px; 
+}
 .icon {
   position: absolute;
   display: inline-block;

diff --git a/src/components/ballot/Input/input.scss b/src/components/ballot/Input/input.scss
@@ -23,9 +23,10 @@
 			font-weight: 400;
 		}
 	}
-    &__input {
+	&__input {
 		display: block;
 		width: 100%;
+		max-height: 40px;
 		outline: none;
 		background-color: rgba($color: #fff, $alpha: 1);
 		color: #A6B4BF;