update chaingear, tx confirmation popup

cybercongress · Nov 22, 2018 · 2a45eb6 · 2a45eb6
1 parent 21f0081
commit 2a45eb6
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 56 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,4 @@ yarn-debug.log*
 yarn-error.log*
 dist
 .idea
+yarn.lock
diff --git a/package.json b/package.json
@@ -2,15 +2,15 @@
   "name": "cyb",
   "description": "Web3 browser",
   "main": "public/electron.js",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "author": {
     "name": "cybercongress",
     "email": "[email protected]"
   },
   "private": true,
   "homepage": "./",
   "dependencies": {
-    "@cybercongress/ui": "0.0.2",
+    "@cybercongress/ui": "^0.0.5",
     "axios": "0.18.0",
     "bech32": "1.1.3",
     "bip39": "2.5.0",
@@ -30,7 +30,7 @@
     "ripemd160": "2.0.2",
     "secp256k1": "3.5.2",
     "sha256": "0.2.0",
-    "web3": "1.0.0-beta.36",
+    "web3": "1.0.0-beta.33",
     "web3-provider-engine": "14.0.6"
   },
   "devDependencies": {

diff --git a/src/Browser.js b/src/Browser.js
@@ -41,7 +41,11 @@ class Browser extends Component {
         webview.addEventListener('did-stop-loading', (e) => {
             this.setState({ loading: false });
         });
-    }
+
+        webview.addEventListener('dom-ready', (e) => {
+            webview.openDevTools();
+        });
+    };
 
     render() {
         const { url } = this.props;

diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
@@ -29,3 +29,7 @@
 .button--full-width {
     width: 100%;
 }
+
+.button--disabled {
+    background: #e0e0e0;
+}
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -1,20 +1,24 @@
 import React from 'react';
-
 import CybLink from '../CybLink';
 
+
 import './Button.css';
 
 const Button = ({
     dura, color, fullWidth, ...props
 }) => {
     let css = 'button';
 
-    if (color === 'green') { css += ' button--green'; }
-    if (color === 'yellow') { css += ' button--yellow'; }
-    if (color === 'turquoise') { css += ' button--turquoise'; }
-    if (color === 'red') { css += ' button--red'; }
-    if (fullWidth === true) { css += ' button--full-width'; }
+    if (props.disabled) {
+        css += ' button--disabled';
+    } else {
+        if (color === 'green') { css += ' button--green'; }
+        if (color === 'yellow') { css += ' button--yellow'; }
+        if (color === 'turquoise') { css += ' button--turquoise'; }
+        if (color === 'red') { css += ' button--red'; }
+    }
 
+    if (fullWidth === true) { css += ' button--full-width'; }
 
     if (dura) {
         return (

diff --git a/src/components/ConfirmationPopup/ConfirmationPopup.js b/src/components/ConfirmationPopup/ConfirmationPopup.js
@@ -1,14 +1,17 @@
 import React from 'react';
 
-import { Title } from '@cybercongress/ui';
+import { Title, Message } from '@cybercongress/ui';
 import './ConfirmationPopup.css';
 import Block, { BlockRow, Row } from '../Settings/Block';
 import Button from '../Button/Button';
 
-const ConfirmationPopup = ({ from, to, approveCallback, rejectCallback, children, content, txHash, totalAmount }) => (
+const ConfirmationPopup = ({
+    from, to, approveCallback, rejectCallback, children,
+    content, txHash, totalAmount, accountBalance, insufficientFunds,
+}) => (
     <div className='confirmation-popup'>
         <span>
-            <Title inline style={{ color: 'black' }}>Transaction confirmation</Title>
+            <Title inline style={ { color: 'black' } }>Transaction confirmation</Title>
             <Block>
                 <BlockRow>
                     <div className='confirmation-popup__popup'>
@@ -20,30 +23,43 @@ const ConfirmationPopup = ({ from, to, approveCallback, rejectCallback, children
                             <div className='popup-label'>Recipient address:</div>
                             <span className='address'>{to}</span>
                         </Row>
+                        <Row>
+                            <div className='popup-label'>Account balance (ETH):</div>
+                            <span className='address'>{accountBalance}</span>
+                        </Row>
                         <Row>
                             <div className='popup-label'>Total amount (ETH):</div>
                             <span className='address'>{totalAmount}</span>
                         </Row>
+                        {insufficientFunds
+                            && (
+                                <Row>
+                                    <Message type='error'>You have insufficient funds</Message>
+                                </Row>
+                            )
+                        }
                         {content}
                     </div>
                     {txHash ? (
                         <div>
                             <div>
-                                Tx hash:
                             </div>
                             <div>
-                                {txHash}
+                                <Message type='info'>
+                                    <span>Tx hash:</span>
+                                    {txHash}
+                                </Message>
                             </div>
                             <div className='confirmation-popup__buttons'>
-                                <Button style={{ width: 250 }} color='turquoise' onClick={rejectCallback}>
+                                <Button style={ { width: 250 } } color='turquoise' onClick={ rejectCallback }>
                                     Close window
                                 </Button>
                             </div>
                         </div>
                     ) : (
                         <div className='confirmation-popup__buttons'>
-                            <Button style={{ width: 150 }} color='green' onClick={approveCallback}>CONFIRM</Button>
-                            <Button style={{ width: 150 }} color='red' onClick={rejectCallback}>REJECT</Button>
+                            <Button style={ { width: 150 } } color='green' onClick={ approveCallback } disabled={insufficientFunds}>CONFIRM</Button>
+                            <Button style={ { width: 150 } } color='red' onClick={ rejectCallback }>REJECT</Button>
                         </div>
                     )}
                 </BlockRow>

diff --git a/src/components/IdBar/IdBar.css b/src/components/IdBar/IdBar.css
@@ -36,7 +36,7 @@
   background: #eff3f6;
   border-radius: 50%;
   cursor: pointer;
-  background: url(./robohash.jpg) no-repeat center center #eff3f6;
+  /*background: no-repeat center center #eff3f6;*/
   background-size: 30px 30px;
 }
 

diff --git a/src/containers/Application/ConfirmationPopup.js b/src/containers/Application/ConfirmationPopup.js
@@ -1,16 +1,15 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import web3 from 'web3';
-import ConfirmationPopup, { ApproveButton } from '../../components/ConfirmationPopup/ConfirmationPopup';
+import ConfirmationPopup, { TxDetailsContainer } from '../../components/ConfirmationPopup/ConfirmationPopup';
 import { approve, reject } from '../../redux/wallet';
 import Input from '../../components/Input/Input';
-import { TxDetailsContainer } from '../../components/ConfirmationPopup/ConfirmationPopup';
-
 
 class ConfirmationPopupContainer extends Component {
     approve = () => {
         const gasLimit = this.gasLimit.value;
         const gasPrice = this.gasPrice.value;
+
         this.props.approve(gasLimit, gasPrice);
     };
 
@@ -23,6 +22,7 @@ class ConfirmationPopupContainer extends Component {
             pendingRequest,
             request,
             lastTransactionId,
+            defaultAccountBalance,
         } = this.props;
 
         const utils = web3.utils;
@@ -51,6 +51,7 @@ class ConfirmationPopupContainer extends Component {
                     .add(utils.toBN(value));
                 totalAmount = utils.fromWei(totalAmount, 'ether');
             } catch (e) {
+                console.log('Something wrong on total amount calculating');
             }
         }
 
@@ -62,42 +63,44 @@ class ConfirmationPopupContainer extends Component {
                         from={ _from }
                         to={ _to }
                         totalAmount={ totalAmount }
+                        accountBalance={ defaultAccountBalance }
+                        insufficientFunds={ totalAmount > defaultAccountBalance }
                         approveCallback={ this.approve }
                         rejectCallback={ this.reject }
                         txHash={ lastTransactionId }
                         content={ (
-                          <TxDetailsContainer>
+                            <TxDetailsContainer>
                                 <span>
-                                  <div className='popup-label'>Amount (ETH):</div>
-                                  <Input
+                                    <div className='popup-label'>Amount (ETH):</div>
+                                    <Input
                                         defaultValue={ _amount }
                                         inputRef={ (node) => {
                                             this.ethAmount = node;
                                         } }
                                         style={ { width: 100 } }
-                                      disabled
+                                        disabled
                                     />
-                              </span>
+                                </span>
                                 <span>
-                                  <div className='popup-label'>Gas price (GWEI):</div>
-                                  <Input
+                                    <div className='popup-label'>Gas price (GWEI):</div>
+                                    <Input
                                         defaultValue={ _gasPriceGwei }
-                                      inputRef={ (node) => {
+                                        inputRef={ (node) => {
                                             this.gasPrice = node;
                                         } }
-                                      style={ { width: 100 } }
+                                        style={ { width: 100 } }
                                     />
-                              </span>
+                                </span>
                                 <span>
-                                  <div className='popup-label'>Gas limit:</div>
-                                  <Input
+                                    <div className='popup-label'>Gas limit:</div>
+                                    <Input
                                         defaultValue={ _gasLimit }
                                         inputRef={ (node) => {
                                             this.gasLimit = node;
                                         } }
                                         style={ { width: 100 } }
                                     />
-                              </span>
+                                </span>
                             </TxDetailsContainer>
                         ) }
                     />
@@ -113,6 +116,7 @@ export default connect(
         pendingRequest: state.wallet.pendingRequest,
         request: state.wallet.request,
         lastTransactionId: state.wallet.lastTransactionId,
+        defaultAccountBalance: state.wallet.defaultAccountBalance,
     }),
     {
         approve,

diff --git a/src/redux/rootRegistry.js b/src/redux/rootRegistry.js
@@ -23,7 +23,7 @@ const initState = {
             protocol: 'ipfs',
         },
         chaingear: {
-            hash: 'QmetbTJ9iPUEzbfgUHWzHPV28JzJMSHxBtYUfMbH85JTxk',
+            hash: 'QmNUfwVQoZsXoFVQCaxszm1AEEyx1i5eZRw1Jcvs53rfQB',
             protocol: 'ipfs',
         },
     },

diff --git a/src/redux/wallet.js b/src/redux/wallet.js
@@ -77,23 +77,23 @@ export const loadAccounts = () => (dispatch, getState) => new Promise((resolve)
         return;
     }
 
-    eth.getAccounts((err, _accounts) => {
-        Promise.all(
-            _accounts.map(address => new Promise((resolve) => {
-                eth.getBalance(address).then((_balance) => {
-                    resolve({
-                        balance: web3.utils.fromWei(_balance, 'ether'),
-                        address: address,
-                    });
+    const _accounts = Object.keys(__accounts).map(address => __accounts[address].address);
+
+    Promise.all(
+        _accounts.map(address => new Promise((resolve) => {
+            eth.getBalance(address).then((_balance) => {
+                resolve({
+                    balance: web3.utils.fromWei(_balance, 'ether'),
+                    address: address,
                 });
-            })),
-        ).then((accounts) => {
-            dispatch({
-                type: 'LOAD_ACCOUNTS',
-                payload: accounts,
             });
-            resolve(accounts);
+        })),
+    ).then((accounts) => {
+        dispatch({
+            type: 'LOAD_ACCOUNTS',
+            payload: accounts,
         });
+        resolve(accounts);
     });
 });
 
@@ -102,11 +102,15 @@ export const setDefaultAccount = account => (dispatch) => {
     let address;
     let balance;
     if (!account) {
+        const defaultAccount = localStorage.getItem('defaultEthAccount');
         if (Object.keys(__accounts).length > 0) {
-
-            Object.keys(__accounts).forEach(_address => {
-                address = __accounts[_address].address;
-            });
+            if (defaultAccount) {
+                address = defaultAccount;
+            } else {
+                Object.keys(__accounts).forEach(_address => {
+                    address = __accounts[_address].address;
+                });
+            }
             balance = eth.getBalance(address);
         }
     } else {
@@ -129,6 +133,7 @@ export const setDefaultAccount = account => (dispatch) => {
         });
     }
 
+    localStorage.setItem('defaultEthAccount', address);
 };
 
 export const importAccount = privateKey => (dispatch, getState) => new Promise((resolve) => {
@@ -311,8 +316,10 @@ export const init = endpoint => (dispatch, getState) => {
     provider = new ZeroClientProvider({
         rpcUrl: endpoint,
         getAccounts(cb) {
-            //show address with low and upper literal
-            const accounts = Object.keys(__accounts).map(address => __accounts[address].address)
+            // show address with low and upper literal
+            // const accounts = Object.keys(__accounts).map(address => __accounts[address].address.toLowerCase());
+            const accounts = getState().wallet.defaultAccount ? [getState().wallet.defaultAccount.toLowerCase()] : [];
+
             cb(null, accounts);
         },