Skip to content

Instantly share code, notes, and snippets.

@MichalZalecki MichalZalecki/app.jsx Secret
Last active Jul 4, 2018

Embed
What would you like to do?
import React from "react";
import Web3 from "web3";
import { render } from "react-dom";
import { BigNumber } from "bignumber.js";
const SimpleToken = require("../build/contracts/SimpleToken.json");
const GenericCrowdsale = require("../build/contracts/GenericCrowdsale.json");
const CROWDSALE = "0x8f0483125fcb9aaaefa9209d8e9d7b9c8b9fb90f";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
symbol: null,
rate: null,
balance: null,
decimals: null,
left: null,
amount: 1000,
};
this.changeAmount = this.changeAmount.bind(this);
this.buy = this.buy.bind(this);
}
componentDidMount() {
this.web3 = new Web3(Web3.givenProvider);
this.Crowdsale = new this.web3.eth.Contract(GenericCrowdsale.abi, CROWDSALE);
this.Crowdsale.methods.rate().call().then((rate) => {
this.setState({ rate });
});
this.Crowdsale.methods.token().call().then((token) => {
this.Token = new this.web3.eth.Contract(SimpleToken.abi, token);
this.Token.methods.symbol().call().then((symbol) => {
this.setState({ symbol });
});
this.Token.methods.decimals().call().then((decimals) => {
this.setState({ decimals: 10 ** decimals });
});
this.Token.methods.balanceOf(CROWDSALE).call().then((left) => {
this.setState({ left: new BigNumber(left) });
});
this.web3.eth.getAccounts()
.then(([account]) => this.Token.methods.balanceOf(account).call())
.then(balance => this.setState({ balance: new BigNumber(balance) }));
});
}
getPrice() {
const { amount, rate } = this.state;
return amount / rate;
}
changeAmount(ev) {
this.setState({ amount: ev.target.value });
}
buy(ev) {
ev.preventDefault();
const { decimals } = this.state;
const value = this.getPrice() * decimals;
this.web3.eth.getAccounts()
.then(([from]) => this.Crowdsale.methods.buyTokens(from).send({ value, from }));
}
render() {
const { symbol, balance, amount, decimals, left } = this.state;
if (!balance || !left) return null;
return (
<div className="jumbotron">
<h1 className="display-4">Buy {symbol}, awesome ERC20 token!</h1>
<p className="lead">See the source to learn how to setup crowdsale landing page</p>
<hr className="my-4" />
<p>You own: {balance.div(decimals).toString()} {symbol}</p>
<p>{left.div(decimals).toString()} {symbol} is left for sale</p>
<form onSubmit={this.buy}>
<div className="input-group mb-3">
<input type="number" className="form-control" placeholder={`How many ${symbol}s you need?`} onChange={this.changeAmount} value={amount} min="1" required />
<div className="input-group-append">
<button className="btn btn-outline-secondary" disabled={!left} type="submit">
Pay {this.getPrice()} ETH
</button>
</div>
</div>
</form>
</div>
);
}
}
render(<App />, document.querySelector("#app"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.