-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.8.js
171 lines (151 loc) · 5.74 KB
/
App.8.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import logo from './blg.jpg';
import './App.css';
// Import the web3 library
import Web3 from 'web3';
// Material UI
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import DropDownMenu from 'material-ui/DropDownMenu';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import MenuItem from 'material-ui/MenuItem';
// Import build Artifacts
import tokenArtifacts from './build/contracts/Token.json';
class App extends Component {
constructor(props) {
super(props)
this.state = {
amount: 0,
availableAccounts: [],
defaultAccount: 0,
ethBalance: 0,
rate: 1,
tokenBalance: 0,
tokenSymbol: 0,
transferAmount: '',
transferUser: '',
token: null, // token contract
};
}
async componentDidMount() {
// Create a web3 connection
this.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
this.web3.version.getNetwork(async (err, netId) => {
const tokenAddress = tokenArtifacts.networks[netId].address;
const token = this.web3.eth.contract(tokenArtifacts.abi).at(tokenAddress);
this.setState({ token });
console.log(token);
// Set token symbol below
const tokenSymbol = await token.symbol();
this.setState({ tokenSymbol });
// Set wei / token rate below
const rate = await token.rate();
this.setState({ rate: rate.toNumber() });
this.loadAccountBalances(this.web3.eth.accounts[0]);
this.loadEventListeners();
this.web3.eth.getAccounts((err, accounts) => {
// Append all available accounts
for (let i = 0; i < accounts.length; i++) {
this.setState({
availableAccounts: this.state.availableAccounts.concat(
<MenuItem value={i} key={accounts[i]} primaryText={accounts[i]} />
)
});
}
});
});
}
// Load the accounts token and ether balances.
async loadAccountBalances(account) {
const balance = await this.state.token.balanceOf(account);
this.setState({ tokenBalance: balance.toNumber() });
const ethBalance = await this.web3.eth.getBalance(account);
this.setState({ ethBalance: ethBalance });
}
// Create listeners for all events.
loadEventListeners() {
this.state.token.Transfer().watch((err, res) => {
console.log(`Tokens Transferred! TxHash: ${res.transactionHash} \n ${JSON.stringify(res.args)}`);
this.loadAccountBalances(this.web3.eth.accounts[this.state.defaultAccount]);
});
}
// Buy new tokens with eth
async buy(amount) {
const sender = this.web3.eth.accounts[this.state.defaultAccount];
const transactionHash = await this.state.token.buy({ from: sender, value: amount });
console.log(transactionHash);
}
// Transfer tokens to a user
async transfer(user, amount) {
const sender = this.web3.eth.accounts[this.state.defaultAccount];
const transactionHash = await this.state.token.transfer(user, amount, { from: sender });
console.log(transactionHash);
}
// When a new account in selected in the available accounts drop down.
handleDropDownChange = (event, index, defaultAccount) => {
this.setState({ defaultAccount });
this.loadAccountBalances(this.state.availableAccounts[index].key);
}
render() {
let component;
component = <div>
<Link to={'newPage'}>
<RaisedButton label=">>> New Page" secondary={true} fullWidth={true}/>
</Link>
<h3>Active Account</h3>
<DropDownMenu maxHeight={300} width={500} value={this.state.defaultAccount} onChange={this.handleDropDownChange}>
{this.state.availableAccounts}
</DropDownMenu>
<h3>Balances</h3>
<p className="App-intro">{this.state.ethBalance / 1e18} ETH</p>
<p className="App-intro"> {this.state.tokenBalance} {this.state.tokenSymbol}</p>
<br />
<div>
<h3>Buy Tokens</h3>
<h5>Rate: {this.state.rate} {this.state.tokenSymbol} / wei</h5>
<TextField floatingLabelText="Token Amount." style={{width: 200}} value={this.state.amount}
onChange={(e, amount) => {this.setState({ amount })}}
/>
<RaisedButton label="Buy" labelPosition="before" primary={true}
onClick={() => this.buy(this.state.amount/this.state.rate)}
/>
</div>
<br />
{/* ADD THE TRANSFER TOKENS FORM BENEATH HERE */}
<div>
<h3>Transfer Tokens</h3>
<TextField floatingLabelText="User to transfer tokens to." style={{width: 400}} value={this.state.transferUser}
onChange={(e, user) => { this.setState({ transferUser: user }) }}
/>
<TextField floatingLabelText="Amount." style={{width: 100}} value={this.state.transferAmount}
onChange={(e, amount) => { this.setState({ transferAmount: amount })}}
/>
<RaisedButton label="Transfer" labelPosition="before" primary={true}
onClick={() => this.transfer(this.state.transferUser, this.state.transferAmount)}
/>
</div>
</div>
const newPage = <div>
<Link to={'/'}>
<RaisedButton label="Wallet <<<" primary={true} fullWidth={true}/>
</Link>
</div>
return (
<MuiThemeProvider>
<div className="App">
<header className="App-header">
<img src={logo} alt="logo" style={{height: '150px', width: '350px'}}/>
</header>
<BrowserRouter>
<div>
<Route exact={true} path="/" render={() => component}/>
<Route exact={true} path="/newPage" render={() => newPage} />
</div>
</BrowserRouter>
</div>
</MuiThemeProvider>
);
}
}
export default App;