starting frontend wallet views

README.md

@@ -3,6 +3,9 @@ Decentralized mutual credit system based on Ethereum smart contracts.
 
 **For the moment this is an implementation of a Proof of Concept.**
 
+![reciprokaWallet](https://raw.githubusercontent.com/arnaucode/reciproka/master/r1.png "reciprokaWallet")
+![reciprokaWallet](https://raw.githubusercontent.com/arnaucode/reciproka/master/r2.png "reciprokaWallet")
+
 ## Components
 - Smart contracts
   - Ethereum Solidity

contracts/accounts.sol

@@ -13,8 +13,8 @@ contract Accounts {
   event BalanceUpdated(address sender, address receiver, int64 value);
 
   function updateBalance(address _receiver, int64 _value) public {
-    // get Account of _sender
     // check if balance of _sender is under the limit
+    require(accounts[msg.sender].Balance - _value > -100, "too much negative balance");
     // substract _value from _sender account
     accounts[msg.sender].Balance = accounts[msg.sender].Balance - _value;
     // add _value to _receiver account

wallet/.gitignore

@@ -19,3 +19,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+src/kit

wallet/package.json

@@ -3,8 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "antd": "^3.8.0",
+    "chart.js": "^2.7.2",
     "oce-components": "git+https://github.com/opencooperativeecosystem/kit.git",
     "react": "^16.4.2",
+    "react-chartjs-2": "^2.7.4",
     "react-dom": "^16.4.2",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",

wallet/src/App.js

@@ -2,7 +2,12 @@ import React, { Component } from 'react';
 import {BrowserRouter, Route, Switch} from 'react-router-dom'
 import './App.css';
 
-import dashboardView from './views/dashboard/dashboard';
+
+import { Row, Col } from 'antd';
+
+import DashboardView from './views/dashboard/dashboard';
+import NewTxView from './views/newtx/newtx';
+import SidemenuView from './views/sidemenu/sidemenu';
 
 
 import './eth/eth.js';
@@ -16,20 +21,25 @@ class App extends Component {
           <nav className="navbar navbar-light bg-light">
             {/* <span className="emptyHorizontal40"></span> */}
             <a className="navbar-brand" href="">
-              <img src={require('./img/app-icon.png')} width="30" height="30" className="d-inline-block align-top" alt=""/>
-              idWallet
+              <img src={require('./img/app-icon.png')} width="30" height="30" className="d-inline-block align-top" />
+               reciproka wallet
             </a>
+            <b>0xa</b>
           </nav>
           {/* <SideMenu/> */}
-          <main className="container">
-            <br/>
-            <div id="view">
-              <Switch>
-                <Route exact="exact" path="/" component={dashboardView}></Route>
-              </Switch>
-            </div>
-          </main>
 
+          <Row gutter={16}>
+            <Col span={4}>
+              <SidemenuView></SidemenuView>
+            </Col>
+            <Col span={20}>
+              <br/>
+              <Switch>
+                <Route exact="exact" path="/" component={DashboardView}></Route>
+                <Route path="/newtx" component={NewTxView}></Route>
+              </Switch>
+            </Col>
+          </Row>
         </div>
       </BrowserRouter>
     );

wallet/src/eth/eth.js

@@ -3,6 +3,7 @@ const web3 = new Web3("https://ropsten.infura.io/TFnR8BWJlqZOKxHHZNcs");
 
 var account = web3.eth.accounts.create()
 console.log("account", account)
+console.log("address", account.address)
 web3.eth.getAccounts(function(error, result){
   console.log(result)
 })

wallet/src/views/dashboard/dashboard.js

@@ -1,6 +1,38 @@
 import React, { Component } from 'react';
 
-import {card, tx} from 'oce-components'
+// import {card, tx} from '../../kit/lib'
+import { Card, Button, Timeline, Row, Col, List, Icon } from 'antd';
+import 'antd/dist/antd.css';
+
+
+import {Line, Doughnut} from 'react-chartjs-2';
+
+var chartLineData = {
+  labels: ['September', 'October', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August'],
+  datasets: [{
+    label: 'Balance',
+    backgroundColor: 'rgba(54, 162, 235, 0)',
+    borderColor: 'rgba(54, 162, 235, 1)',
+    borderWidth: 1,
+    hoverBackgroundColor: 'rgba(54, 162, 235,0.4)',
+    hoverBorderColor: 'rgba(54, 162, 235,1)',
+    data: [0, 59, 55, -50, -56, 120, 40, -20, 10, 45]
+  }]
+};
+var chartDoughnutData = {
+  labels: ['Received', 'Sended'],
+  datasets: [{
+    label: 'Identities use',
+    backgroundColor: ['#36A2EB', '#FF6384'],
+		hoverBackgroundColor: ['#36A2EB', '#FF6384'],
+    data: [25, 20]
+  }]
+};
+
+const listData = [
+  'New transaction received',
+  'Sended new transaction'
+];
 
 class dashboard extends Component {
   constructor(props) {
@@ -12,7 +44,67 @@ class dashboard extends Component {
   render() {
     return (
       <div>
-        <card></card>
+        <Row gutter={16}>
+          <Col span={8}>
+            <Line
+              height={200}
+              data={chartLineData}
+            />
+          </Col>
+          <Col span={8}>
+            <Card title="Notifications" extra={<a href="#">More</a>}>
+              <List>
+                <List.Item>
+                  <Icon type="check" /> Transaction received
+                </List.Item>
+                <List.Item>
+                  <Icon type="check" /> Transaction sended
+                </List.Item>
+                <List.Item>
+                  <Icon type="export" /> Backup imported
+                </List.Item>
+                <List.Item>
+                  <Icon type="save" /> Backup exported
+                </List.Item>
+              </List>
+            </Card>
+          </Col>
+        </Row>
+        <br/>
+          <Row gutter={16}>
+            <Col span={8}>
+              <Card title="Last transactions" extra={<a href="#">More</a>}>
+                <Timeline>
+                  <Timeline.Item color="green">
+                    Received 10 credits · <i>2018-08-07</i>
+                  </Timeline.Item>
+                  <Timeline.Item color="red">
+                    Sended 20 credits · <i>2018-08-06</i>
+                  </Timeline.Item>
+                  <Timeline.Item color="green">
+                    Received 15 credits · <i>2018-08-05</i>
+                  </Timeline.Item>
+                  <Timeline.Item color="red">
+                    Sended 20 credits · <i>2018-08-05</i>
+                  </Timeline.Item>
+                  <Timeline.Item color="green">
+                    Received 15 credits · <i>2018-08-04</i>
+                  </Timeline.Item>
+                  <Timeline.Item>
+                    Account created · <i>2018-08-03</i>
+                  </Timeline.Item>
+                </Timeline>
+              </Card>
+            </Col>
+
+              <Col span={8}>
+                <Doughnut
+                  height={200}
+                  data={chartDoughnutData}
+                />
+              </Col>
+          </Row>
+
       </div>
     );
   }

wallet/src/views/newtx/newtx.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+
+// import {card, tx} from '../../kit/lib'
+import { Card, Button, Timeline, Row, Col, List, Icon,
+          Form, Input, InputNumber, Checkbox } from 'antd';
+import 'antd/dist/antd.css';
+const FormItem = Form.Item;
+
+
+
+class newtx extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      receiver: '',
+      value: 0
+    };
+
+  }
+  render() {
+    const { receiver, value } = this.state;
+    return (
+      <div>
+        <Row gutter={16}>
+          <Col span={12}>
+            <Card title="New transaction">
+              <Input
+                placeholder="address"
+                prefix={<Icon type="qrcode" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                style={{ width: 200 }}
+              />
+              <br/><br/>
+              <InputNumber
+                min={0}
+                defaultValue={0}
+                style={{marginRight: 10}} />
+
+              <Button type="primary" icon="check">Send</Button>
+            </Card>
+          </Col>
+        </Row>
+
+      </div>
+    );
+  }
+}
+
+export default newtx;

wallet/src/views/sidemenu/sidemenu.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter, Route, NavLink } from 'react-router-dom'
+
+import { Menu, Icon } from 'antd';
+
+const SubMenu = Menu.SubMenu;
+const MenuItemGroup = Menu.ItemGroup;
+
+
+
+class dashboard extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+
+  }
+  render() {
+    return (
+      <Menu
+        onClick={this.handleClick}
+        defaultSelectedKeys={['1']}
+        defaultOpenKeys={['sub1']}
+        mode="inline"
+      >
+        <Menu.Item key="1">
+          <NavLink to="/">
+            <Icon type="home" />Dashboard
+          </NavLink>
+        </Menu.Item>
+        <Menu.Item key="2">
+          <NavLink to="/newtx">
+            <Icon type="plus" />New transaction
+          </NavLink>
+      </Menu.Item>
+        <Menu.Item key="3"><Icon type="calendar" />History</Menu.Item>
+        <Menu.Item key="4"><Icon type="pie-chart" />Stats</Menu.Item>
+      </Menu>
+    );
+  }
+}
+
+export default dashboard;